如何使用纯css自动调整图像的响应式设计？
[英]How to auto resize the image for responsive design with pure css?
问题描述
I have tried to auto resize the image using the CSS property max-width , but it does't work in IE7 and IE8. 
我试图使用CSS属性max-width自动调整图像大小，但它在IE7和IE8中不起作用。 Is there any way to auto resize the image with pure CSS in IE7 and IE8? 有没有办法在IE7和IE8中使用纯CSS自动调整图像大小？
8 个解决方案
解决方案1
14 2012-01-12 04:34:51
Use width: inherit; 使用width: inherit; to make it work with pure CSS in IE8. 使它在IE8中使用纯CSS。 (See responsive-base.css .) Like this: （请参阅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. 我不确定它是否适用于IE7-请测试一下，如果您正在测试IE7，请告诉我们。 Before I figured out the width: inherit technique 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: 在我弄清楚width: inherit之前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]-->
解决方案2
2 2012-04-10 11:09:39
Doesn't IE 7&8 recognise the following: IE 7和8不识别以下内容：
#my-div img
{
max-width:100%;
_max-width:100%;
}
解决方案3
2 2011-11-18 05:07:40
解决方案4
2 2011-11-18 05:53:44
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.html JS source file: http://kizu.ru/lib/ie/ie.js 示例： http ： //kizu.ru/lib/ie/minmax.html JS源文件： http ： //kizu.ru/lib/ie/ie.js
Author: Roman Komarov 作者： 罗曼科马罗夫
解决方案5
1 2011-11-18 05:08:05
Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. 大多数网络开发人员都知道IE在标准竞争中落后，能够展示最新和最好的标准。 Many CSS2 properties are unsupported. 许多CSS2属性不受支持。 Some of the more useful ones, are properties such as max-width , max-height, min-width and finally min-height. 一些更有用的属性是最大宽度 ，最大高度，最小宽度和最终最小高度等属性。 Try this: 试试这个：
<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>
解决方案6
0 2012-12-30 16:26:24
Use max-width: 100% with height:auto , plus width:auto for IE8: 使用max-width: 100% with height:auto ，plus width:auto for IE8：
img
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
@media \0screen
{
img
{
width: auto;
}
}
解决方案7
0 2013-01-29 07:23:04
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缩小和gzip）然后使用以下css：
@media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
解决方案8
0 2015-04-19 14:22:45
I tested it and working for every browser 我测试了它并为每个浏览器工作
img{
height: auto;
max-width: 100%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.