Html 如何根据屏幕尺寸调整图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30555326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fit an image according to screen size
提问by Saji
Let's say we have image with 2000px width & 500px height in css property. For a 1080p monitor how can I configure this image properly. I want this image to be set on any screen size for responsive design.
假设我们在 css 属性中有宽度为 2000 像素和高度为 500 像素的图像。对于 1080p 显示器，我如何正确配置此图像。我希望将此图像设置在任何屏幕尺寸上以进行响应式设计。
回答by Dilip Raj Baral
This is what you want:
这就是你想要的：
img {
width: 100%;
height: auto;
}
If you want your image to be scaled differently (or add/override certain styles for more responsivenss) in different devices you need to use CSS media queries. Eg.
如果您希望您的图像在不同设备中以不同方式缩放（或添加/覆盖某些样式以获得更多响应），您需要使用 CSS 媒体查询。例如。
img {
display: inline-block;
width: 25%; // Show 4 images in a row normally
height: auto;
}
@media (max-width: 600px) {
img {
width: 100%; // Override width to show only one image in a row on smaller screens
}
}
Mozilla Documentation on CSS media queries
回答by Akhilesh Kumar
if you want to keep aspect ratio then put width:100% and height:auto
如果你想保持纵横比，那么把 width:100% 和 height:auto
if you want to cover whole parent element then height:100% and width:100%
如果要覆盖整个父元素，则高度：100% 和宽度：100%
