尝试将<img/>标记设置为使用页面大小自动缩放

Question

<center>
    <img style="width: 100%; max-height: 100%" src="images/ratios/3to2ratio.JPG" />
        This is a classic 35mm Still Film ratio. 3:2
</center>

此代码可确保图像随页面大小的变化而变化。但是，我希望我的图像是原始尺寸，并且能够进行缩放。

Answer 1

做：

img{
 width:100%;
 height :auto /* to maintain aspect ratio*/
}

Answer 2

<center>
    <img style="width:100%;" src="images/ratios/3to2ratio.JPG">
        This is a classic 35mm Still Film ratio. 3:2
</center>

不要让你的身高100％

Answer 3

img {
width: 100%;
height: auto;}

尝试重新调整大小...... :) codepen.io

Answer 4

首先，避免center - 标记。要在CSS中实现此行为，请将text-align: center设置为img - 元素的父元素。

使用以下方法解决实际问题：

img {
    max-width: 100%;
}