如何使用 CSS 使图像具有响应性？答案

【问题标题】：How to make an image responsive using CSS?如何使用 CSS 使图像具有响应性？
【发布时间】：2016-12-18 23:48:13
【问题描述】：

如何使图像具有响应性，以便在您更改屏幕尺寸时保持其比例？即，如果我在图像的中间右侧有一本书封面（如此处的标题图像http://julianadorney.com/），我如何在不同屏幕上将书籍封面保持在图像中大致相同的位置？

我已经使用大约 30 种不同的最小高度和最小宽度媒体查询对某些东西进行了评审，但似乎应该有一个更优雅的解决方案。

我尝试了宽度：100% 和高度：自动；运气不好

请不要使用 Javascript。不知道是什么...

提前致谢，朱利安

【问题讨论】：

您是否尝试过包含图像的 div，然后是图像高度：100% 和宽度 100%？如果您更改 div 度量，图像应该正确重新缩放
为什么不把它作为一个 div 背景，用封面、包含或百分比来玩呢？

标签： responsive-design image-scaling

【解决方案1】：

对不起，我知道为时已晚，而你已经知道了。但我会回答。您可以使用

使图像具有响应性

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

&lt;img src="https://1.bp.blogspot.com/-MEzgCTqi2es/X3dZYeZFtuI/AAAAAAAATc0/ltXNshjx26wqPp1bVSMf9R-EWINMpHRYgCLcBGAsYHQ/s16000/A%2Bcommercieal%2BFair%2B6.jpg" alt="Image of Banijjo Mela 2020"&gt;

然后resive screen 看看。您也可以使用媒体来做到这一点。

【讨论】：