自动调整图像大小以适应比例但不拉伸

Question

我想根据屏幕尺寸调整图像大小,但是当屏幕太大时我不希望该图像超过其实际像素.到目前为止,我设法做到了这一点

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;">
<img src="myImg.png" style="width: 80%">
</div>

这样可以保持我想要的比例,但是当屏幕太大时,它也会拉伸图像.我不希望这样.

Answer 1

响应式图像的CSS如下:

    max-width: 100%;
    height: auto;

这将使图像缩小其容器的大小,而不会超出图像的自然宽度.但是,使用width: 100%;将强制图像与其容器一样宽,而不管图像的实际大小.

其他几点说明:

• align="center"已弃用.您应该使用css来对齐内容,所以text-align: center;.
• 使用position: static;是不必要的,因为它是position属性的默认值.我唯一能想到你需要使用它的地方就是你需要覆盖其他一些css.
• 除非你绝对定位你的div(你不是),top: 0; left: 0;否则什么都不做.

在没有看到其余代码的情况下,我认为这将是您要完成的最佳解决方案:

    <div style="text-align: center;">
       <img src="myImg.png" style="max-width: 100%; height: auto;" alt="FYI, image alt text is required" />
    </div>