[英]How do I set a responsive proportional image that is relative to its own height – NOT its width
如何设置相对于自身高度而不是宽度的响应比例图像?
只需设置...
img{
width: auto;
height: 100%;
}
没有给我图像的比例尺寸。
我怎样才能做到这一点?
我发现唯一一致的解决方案是JavaScript。
引入了除IE8之外的所有浏览器都支持的naturalWidth和naturalHeight..。 IE8也有解决方法。 ( http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/ )
如果您不介意使用jquery和下划线,则可以像这样设置每个宽度。
$(window).load( function() {
function imgWidth(){
$("img").each( function(){
nWidth = $(this)[0].naturalWidth;
nHeight = $(this)[0].naturalHeight;
nRatio = nWidth/nHeight;
curHeight = $(this).height();
$(this).css("width", curHeight*nRatio);
});
}
imgWidth();
var updateLayout = _.debounce( function(e) {
imgWidth();
}, 500);
window.addEventListener("resize", updateLayout, false);
}
在HTML / CSS中,图像处理变得令人费解。 在很多情况下,取决于div属性,直接在img上的height标签将被忽略。 我认为最简单的方法是使用有问题的图像作为背景来创建div。
.img-div {
height:x; width:x;
background:url(file/path/here.svg);
background-position:center;
background-size:auto 100%;
这是一个演示: https : //jsfiddle.net/JTBennett/nukLf5m3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.