如何創建成比例的圖像高度/寬度

因此，我想要將圖像調整爲原始高度/寬度的30％。假裝你不知道它的高度或寬度，你將如何使用只有CSS/HTML？如何創建成比例的圖像高度/寬度

2010-08-01 PizzaPie

你爲什麼要這麼做？在瀏覽器中調整圖像大小通常很糟糕（效果明顯），並且根據其原始大小調整大小沒什麼意義。 – You 2010-08-01 00:18:44

更新：

使用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％（這是它的原始寬度）。

這裏是demo in action。

~~可悲的是沒有純粹的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); 
    } 
});

來源

2010-08-01 01:19:57 Pat

好主意，但不是「只使用CSS/HTML」，任何人都有這個解決方案？ – 2012-09-21 04:08:36

@AbishaiGray想出了一個CSS的唯一方法來做它的寬度。 – Pat 2012-09-22 02:09:50

如果你需要一個快速的解決方案內嵌：

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

來源

2012-02-10 12:46:43 Blum

簡單規則！ – birdus 2017-09-26 21:57:05

如何創建成比例的圖像高度/寬度

回答

相關問題