保持固定高度的图像宽高比

我有一个高度为600px的图像。我使用的是一个img标签，而不是背景图片。原因是因为响应。我希望图像根据屏幕尺寸调整大小。但我希望我的图像的高度为300px。现在，如果我设置了max-height:300px和width:100%。图像看起来很紧张。是否有一种方法可以根据屏幕尺寸调整图像的比例以及响应速度？保持固定高度的图像宽高比

这是一个自举传送带图像。

来源

2016-10-05 Simeon Mark Fernandes

提供您的代码 –

[这]（http://stackoverflow.com/questions/39289576/css-image-resize-问题/ 39289947＃39289947）可能会让你开始... – kukkuz

集width:auto;，像下面的例子：

img.non-stretched { 
 
    max-height:300px; 
 
    width:auto; 
 
} 
 
img.stretched { 
 
    max-height:300px; 
 
    width:100%; 
 
}

<img class="non-stretched" src="http://placehold.it/600x600"/> 
 
<img class="stretched" src="http://placehold.it/600x600"/>

的width初值为auto，所以你可以删除width财产。但在你的情况下设置width会更安全，因为使用过的框架或其他样式表可以用另一个值覆盖规则。

您可以找到有关width财产这里的更多信息： https://www.w3.org/TR/CSS2/visudet.html#the-width-property

来源

2016-10-05 10:27:05

我找到了答案....我用max-height：530px和object-fit：cover –

保持固定高度的图像宽高比

回答

相关问题