因此,我希望将图像调整为原始高度/宽度的 30%。假设您不知道它的高度或宽度,您将如何仅使用 CSS/HTML 来处理它?
问问题
84515 次
3 回答
49
如果您需要快速的内联解决方案:
<img style="max-width: 100px; height: auto; " src="image.jpg" />
于 2012-02-10T12:46:43.340 回答
40
更新:
使用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);
}
});
于 2010-08-01T01:19:57.923 回答
1
<img style="max-width: 100%; height: auto; " src="image.jpg" />
我使用百分比到最大宽度,非常好
于 2021-07-02T09:34:02.427 回答