如何使图像的宽度自定义高度调整大小

我想使图像的大小可调整。我对此图像有一个特定的高度：height: 100%（在一个容器内）和一个width: auto;（我希望宽度适应与自然图像大小有关的高度）。如何使图像的宽度自定义高度调整大小

当我访问页面时，一切正常，但当我调整窗口大小，正确调整高度的大小，但宽度保持其初始值，我希望它是成比例的（就像当我访问页面的第一个时间）到高度。

有没有办法在CSS中做到这一点？如果不是，那么更优化的解决方案是什么？

以下是在代码的图示：

HTML

<div class="container"> 
    <img alt="test" src="/img/test.png"> 
</div>

CSS

.container { 
    height: 100px; 
    width: 100%; 
} 

.container img { 
    height: 100%; 
    width: auto; //i need it to be adapted to each height about the natural image's dimensions 
}

UPDATE

这里是一个的jsfiddle http://jsfiddle.net/CRGj6/1/ 有时它的工作原理有时它不...

来源

2014-05-04 Ludo

你可以创建一个jsfiddle吗？您的问题不能使用给定的细节进行复制。 – Ejaz

'当我调整窗口大小时，高度已正确调整大小，但宽度保持其初始值。窗口大小如何随高度变化而变化？高度设置为“100px”，因此无论窗口大小如何，它始终保持为“100px”。 – Ejaz

它可以在其他浏览器中使用吗？我认为这是一件事情。在这种情况下，尝试删除宽度：auto – tylerlindell

窗口大小调整仅影响元素的宽度而不是高度。这是有道理的，因为如果你调整高度，更多的内容是可滚动的，这意味着不做任何事情的宽度，但增加滚动条的长度（所以更多的内容被滚动）。假设你想保留图像的高宽比，那么

.wrapper .container img { 
    position: relative; 
    height: auto; 
    width: 100%; 
}

将是解决这个问题的方法。

来源

2014-05-04 18:04:15 raunay

但我不希望图像占用宽度的100％，我希望高度占据高度的100％，并且宽度符合自然宽高比必须保持的最小值。 – Ludo

您是否调整窗口的高度，然后？ – raunay

是的，当我调整窗口的高度时，图像的宽度不会改变。 – Ludo

如何使图像的宽度自定义高度调整大小

回答

相关问题