web-dev-qa-db-ja.com

画像の高さ/幅に比例するように作成する方法

そのため、元の高さ/幅の30％にサイズ変更したいのですが。その高さまたは幅がわからないふりをして、CSS/HTMLだけを使用してどうするのですか？

htmlcssimage-resizing
15
PizzaPie

更新：

を使って 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);
    }
});
29
Pat

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

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