CSS 根据屏幕分辨率调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25034781/
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
Adjust image size according to screen resolution
提问by megamage
I have an image in my footer with width:1363pxand height: 100px. This looks fine on my desktop computer with resolution 1366*768 but when I check the site with resolution 1024*768 the size of the image is not shrinking.
我的页脚中有一个带有width:1363px和的图像height: 100px。这在分辨率为 1366*768 的台式计算机上看起来不错，但是当我检查分辨率为 1024*768 的站点时，图像的大小没有缩小。
So my question is how do I adjust the size of the image according to screen size using css. I used media queries and changed the width and height of image but it still remains the same. I also tried some other tricks with no luck.
所以我的问题是如何使用css根据屏幕大小调整图像的大小。我使用了媒体查询并更改了图像的宽度和高度，但它仍然保持不变。我还尝试了一些其他技巧，但没有运气。
回答by Tanner
You can simply set the image to width: 100%and it will scale with the browser.
您可以简单地将图像设置为width: 100%，它将随浏览器缩放。
Demo JS Fiddle
演示 JS 小提琴
HTML
HTML
<div id="footer">
<img src="~/yourimage.jpg" />
</div>
CSS
CSS
#footer img{
width: 100%;
}
Without seeing your image, it's difficult to advise, but an alternative is to not use a full width image and use a background colour instead:
没有看到您的图像，很难给出建议，但另一种方法是不使用全宽图像并使用背景颜色：
Demo JS Fiddle
演示 JS 小提琴
Or use a horizontally repeating image:
或者使用水平重复的图像：
Demo JS Fiddle
演示 JS 小提琴
回答by Miu
You can use css bootstrap responsive for this. http://getbootstrap.com/css/
您可以为此使用 css bootstrap 响应。 http://getbootstrap.com/css/
It shrinks the contents of your div according to screen size.
它根据屏幕大小缩小 div 的内容。
But if you want to do it manually, set width of footer content to (example)
但是如果你想手动完成，将页脚内容的宽度设置为（示例）
width:100%
Then set a specific size for footer (example)
然后为页脚设置特定大小（示例）
width:1024px
After that use @media queries http://css-tricks.com/css-media-queries/
之后使用@media 查询 http://css-tricks.com/css-media-queries/
Example
例子
@media all and (max-width: 1024px) and (min-width: 768px){
#footer{
width:800px; //or something like this
}
}
回答by Liam Richardson
Try
尝试
img{width: 100%; max-width: 1363px;}
This should shrink the image down with the size of the browser, but won't distort the image on resolutions higher than it's maximum width.
这应该会随着浏览器的大小缩小图像，但不会在高于最大宽度的分辨率下扭曲图像。
回答by Deepa Monger
you put that image in container tag and after that give a width t0 that image and make height auto of that image.
您将该图像放入容器标签中，然后为该图像指定宽度 t0 并使该图像的高度为自动。
