html - 比例した画像の高さ/幅を作成する方法

Question

そのため、画像のサイズを元の高さ/幅の 30% に変更したいと考えています。高さや幅がわからないふりをして、CSS/HTML だけを使用してどのように処理しますか?

Answer 1

迅速なインライン ソリューションが必要な場合:

<img style="max-width: 100px; height: auto; " src="image.jpg" />

Answer 2

アップデート：

ラッパーを使用するdisplay: inline-block;と、CSS のみでこれを実現できます。

HTML

<div class="holder">
    <img src="your-image.jpg" />
</div>

CSS

.holder {   
  width: auto;
  display: inline-block;    
}

.holder img {
  width: 30%; /* Will shrink image to 30% of its original width */
  height: auto;    
}​

ラッパーは画像の元の幅に折りたたまれ、画像のwidth: 30%CSS ルールにより、画像は親の幅 (元の幅) の 30% に縮小されます。

これが実際のデモです。

---

悲しいことに、どちらもそのような計算を実行するように調整されていないため、純粋な HTML/CSS の方法はありません。 ただし、jQuery のスニペットを使えば非常に簡単です。

$('img.toResizeClass').each(function(){

    var $img = $(this),
        imgWidth = $img.width(),
        imgHeight = $img.height();

    if(imgWidth > imgHeight){
        $img.width(imgWidth * 0.3);
    } else {
        $img.height(imgHeight * 0.3);
    }
});