如何设置相对于其自身高度的响应比例图像 - 不是其宽度
如何设置与其自身高度相关的响应比例图像 - 而不是其宽度？如何设置相对于其自身高度的响应比例图像 - 不是其宽度
简单设置...
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%;
没错..这是一个很好的方法，但问题是它没有引用实际图像的大小，因此不能与它成比例高度。因此，虽然它将适合容器内的任何图像，但图像本身对容器比例没有任何意义。良好的解决方案，但不针对整个请求。 （缺少与其自身高度相关的比例图像） –
我必须错过一些东西 - 您是否在使用光栅化图像进行处理，而不希望缩放到特定大小以上？这里的例子是相对于它的高度保持完美的比例 - 如果我有你的代码看，我可以提供更多的帮助，因为无论你的使用意图如何，都将决定最佳方式。 您提到了bootstrap - 如果您想要查找并替换CSS中影响“img”的所有值并尝试再次处理图像的类设置，您可能会发现发生冲突。 – Joel
简单：只要不指定宽度，如果你把它指定，它应该使用一个指定的尺寸（高度）和图像的长宽比，以确定宽度。很酷很好吧？ – dandavis
这就是我的想法！但在某种程度上，这种方法停止工作。我的构建使用引导，如果我没有指定宽度..即使我指定自动，继承或初始图像宽度变得扭曲。但是，如果我在检查员中指定宽度，它会回弹...奇怪的权利？ –
是的，BS通过img“重置”规则调整了简单性。我们在工作中使用的一种方式是使用内联高度尺寸，然后是：#main img {max-width：none;} img：not（[height]）{height：auto; max-width：100％; }'你可以对_width_执行相同的操作，但不能同时执行。这是我对同一问题的聪明的小修理，但你的里程可能会有所不同... – dandavis