Html 如何使用纯 css 自动调整图像大小以进行响应式设计？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8177991/
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 auto resize the image for responsive design with pure css?
提问by Viduthalai
I have tried to auto resize the image using the CSS property max-width, but it does't work in IE7 and IE8. Is there any way to auto resize the image with pure CSS in IE7 and IE8?
我曾尝试使用 CSS 属性自动调整图像大小max-width，但它在 IE7 和 IE8 中不起作用。有没有办法在 IE7 和 IE8 中使用纯 CSS 自动调整图像大小？
回答by ryanve
Use width: inherit;to make it work with pure CSS in IE8.
(See responsive-base.css.) Like this:
使用width: inherit;，使其在IE8纯CSS工作。（见responsive-base.css。）像这样：
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
I'm not sure if that works in IE7—please test it and let us know if you're testing IE7. Before I figured out the width: inherittechnique I was using the jQuery below, so you could try it if you really need support down to IE7 and the first technique doesn't work:
我不确定这是否适用于 IE7 — 请测试它并让我们知道您是否正在测试 IE7。在我弄清楚width: inherit使用下面的 jQuery的技术之前，如果您确实需要对 IE7 的支持并且第一种技术不起作用，则可以尝试它：
<!--[if lt IE 9]><script>
jQuery(function($) {
$('img').each(function(){
// .removeAttr supports SSVs in jQuery 1.7+
$(this).removeAttr('width height');
});
});
</script><![endif]-->
回答by grc
回答by Nick Sadovnikov
You need a one-time cached expression for IE 6-7.
您需要一个用于 IE 6-7 的一次性缓存表达式。
IMG {
zoom:expression(
function(t){
t.runtimeStyle.zoom = 1;
var maxW = parseInt(t.currentStyle['max-width'], 10);
var maxH = parseInt(t.currentStyle['max-height'], 10);
if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
t.style.width = maxW;
} else if (t.scrollHeight > maxH) {
t.style.height = maxH;
}
}(this)
);
}
Example: http://kizu.ru/lib/ie/minmax.htmlJS source file: http://kizu.ru/lib/ie/ie.js
示例：http: //kizu.ru/lib/ie/minmax.htmlJS 源文件：http: //kizu.ru/lib/ie/ie.js
Author: Roman Komarov
作者：罗曼·科马罗夫
回答by Tracy
Doesn't IE 7&8 recognise the following:
IE 7&8 不识别以下内容：
#my-div img
{
max-width:100%;
_max-width:100%;
}
回答by kapillohakare
Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. Many CSS2 properties are unsupported. Some of the more useful ones, are properties such as max-width, max-height, min-width and finally min-height. Try this:
大多数 Web 开发人员都知道 IE 在标准的竞赛中已经落后，并且能够展示最新和最伟大的东西。许多 CSS2 属性不受支持。一些更有用的属性是诸如max-width、 max-height 、 min-width 和最后的 min-height 。尝试这个：
<html>
<style>
p {
border:1px solid red;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
</style>
<body>
<p>
[alot of text]
</p>
回答by Paul Sweatte
Use max-width: 100%with height:auto, plus width:autofor IE8:
使用max-width: 100%带height:auto，再加上width:auto对IE8：
img
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
@media @media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
screen
{
img
{
width: auto;
}
}
回答by Lucky Soni
As you also want support for media queries..You can use the following polyfill to add support for media queries to IE6-IE8
由于您还希望支持媒体查询..您可以使用以下 polyfill 向 IE6-IE8 添加对媒体查询的支持
https://github.com/scottjehl/Respond(very small in size, just 1-2kb minified and gzipped) then use the following css:
https://github.com/scottjehl/Respond（尺寸非常小，压缩和压缩后只有 1-2kb）然后使用以下 css：
img{
height: auto;
max-width: 100%;
}
回答by Ali Adravi
I tested it and working for every browser
我测试了它并适用于每个浏览器
##代码##