Question

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

图像尺寸为1920 x 400像素，但在测量图像时，高度仅为345像素。是关于比例还是什么？我已经测试过改变图像的宽度，但我的高度仍然是345像素！

我的问题是：使用宽幅图像时，我可以获得图像的完整高度以及宽度的最佳尺寸吗？我想这不一定是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

你的意思是这样吗？

我只是将图片的css属性设置为

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

所以它填满了页面。

或者不是你的意思？

Answer 2

如果在包含在另一个元素中的元素中定义100％大小，则它可以占用它的父大小。在这种情况下，100％宽度（因为它是图像）将采用所有#start可用宽度并按比例调整其高度（至少在大多数浏览器中）。

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

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

然后，图像将使用它的实际高度并使用#start宽度进行遮罩，因为任何溢出都是隐藏的。

通常，这个想法是拥有图像的包装元素，然后根据您想要的结果使用图像css属性。

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

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

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

编辑2：要获得蒙版的全宽和全高图像，您需要绝对 - 定位图像的包装。

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

Answer 3

试试这个

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