如何设置相对于其自身高度而非宽度的响应式比例图像
How do I set a responsive proportional image that is relative to its own height – NOT its width
如何设置相对于自身高度而非宽度的响应比例图像?
简单设置...
img{
width: auto;
height: 100%;
}
没有为我的图像提供比例尺寸。
我该怎么做?
我发现唯一一致的解决方案是 javascript。
引入 naturalWidth 和 naturalHeight。除 IE8 外,所有浏览器均支持。
也有针对 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 中变得非常复杂。直接在 img 上的高度标签在很多情况下都会被忽略,具体取决于 div 属性。我认为最简单的方法是创建一个 div 并将相关图像设置为背景。
.img-div {
height:x; width:x;
background:url(file/path/here.svg);
background-position:center;
background-size:auto 100%;
如何设置相对于自身高度而非宽度的响应比例图像?
简单设置...
img{
width: auto;
height: 100%;
}
没有为我的图像提供比例尺寸。
我该怎么做?
我发现唯一一致的解决方案是 javascript。
引入 naturalWidth 和 naturalHeight。除 IE8 外,所有浏览器均支持。 也有针对 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 中变得非常复杂。直接在 img 上的高度标签在很多情况下都会被忽略,具体取决于 div 属性。我认为最简单的方法是创建一个 div 并将相关图像设置为背景。
.img-div {
height:x; width:x;
background:url(file/path/here.svg);
background-position:center;
background-size:auto 100%;