[英]How to auto resize the image for responsive design with pure css?
我试图使用CSS属性max-width
自动调整图像大小,但它在IE7和IE8中不起作用。 有没有办法在IE7和IE8中使用纯CSS自动调整图像大小?
使用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. */
}
我不确定它是否适用于IE7-请测试一下,如果您正在测试IE7,请告诉我们。 在我弄清楚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]-->
IE 7和8不识别以下内容:
#my-div img
{
max-width:100%;
_max-width:100%;
}
尝试这样的事情:
width: expression(document.body.clientWidth > 800 ? "800px" : "auto" );
/* If page is wider than 800px then set width to 800px, otherwise set to auto */
来源 (值得一看)
您需要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)
);
}
示例: http : //kizu.ru/lib/ie/minmax.html JS源文件: http : //kizu.ru/lib/ie/ie.js
作者: 罗曼科马罗夫
大多数网络开发人员都知道IE在标准竞争中落后,能够展示最新和最好的标准。 许多CSS2属性不受支持。 一些更有用的属性是最大宽度 ,最大高度,最小宽度和最终最小高度等属性。 试试这个:
<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>
使用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;
}
}
因为您还需要支持媒体查询..您可以使用以下polyfill为IE6-IE8添加对媒体查询的支持
https://github.com/scottjehl/Respond (非常小,只需1-2kb缩小和gzip)然后使用以下css:
@media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
我测试了它并为每个浏览器工作
img{
height: auto;
max-width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.