宽度为100％时的图像全高

Question

我在顶部有一个图像。我希望它从左到右是宽的。尽管在CSS设置中有各种变化，但我无法获得图像的全部高度，但全宽工作正常。

图像的大小是1920 x 400像素，但是当我测量图像时，高度只有345像素。是关于比例还是什么？我已经测试过改变图像的宽度，但我仍然得到345像素的高度！

我的问题是：我可以获得图像的全高，使用宽图像时最佳的宽度是多少？我想这是没有必要的TP已经1920年

HTML：

<div id="start"> 
<img class="start" src="bilderGuide/bilderLayout/start.jpg" /> 
</div> 

我的CSS：

#start 
{ 
width: 100%; 
height: auto; 
} 

img.start 
{ 
width: 100%; 
height: 100%; 
} 

Answer 1

你的意思是这样的？

jsFiddle

我刚刚设置的CSS属性的关闭图像

min-height: 100%; 
min-width: 100%; 

，使其填充页面。

或不是你的意思？

编辑： New jsFiddle

Answer 2

当你包裹在里面另一个元素定义了100％的大小，它可以占据它的父的大小。在这种情况下，100％宽度，因为它是一个图像，将采取所有＃开始可用的宽度，并按比例调整它的高度（至少在大多数浏览器中）。

有你想要一些技巧可以使用，根据结果：

#start {width:960px;overflow:hidden;margin:0 auto;} 
    img.start {/*reset max-min height if any*/ max-height:none;max-width:none;} 

图像，然后，将使用它的真正高度，并与＃开始的宽度得到掩盖，因为任何溢出隐藏。

这个想法，一般来说，是有一个图像的包装元素，然后根据你想要的结果与图像CSS属性一起玩。

至于最佳尺寸，我猜即使是较小的宽度（1600px左右）也足够了，但这一切都取决于你想要的结果。

编辑： 对于标准高度，全宽图像你可以使用：

#start {width:100%;overflow:hidden;margin:0 auto;height:300px;} 
    img.start {min-height:300px;min-width:100%} 

jsfiddle link

编辑2： 要得到一个完整的宽度和掩码的全高度图象，你需要绝对 - 定位图像的包装。

#start {width:100%;height:100%;overflow:hidden;margin:0;padding:0;position:absolute;} 
img.start {min-height:100%;min-width:100%;} 

another fiddle

Answer 3

试试这个

#start { 
    width:100%; 
    height:100%; 
    display:inline-block; 
} 
img.start { 
    min-height:100%; 
    min-width:100%; 
}