我如何能够为响应式图像提供全宽度

Question

我有一个网站 http://hotelshimlahill.com/demo/ sldier图像大小为800x400 但是你可以看到高度太高，我想让滑块图像响应整个宽度而不会失去高度。 请检查并尽快告诉我。

Answer 1

嗨！只需使用以下css规则即可获得图像的灵活宽度和高度

.item img {
    height: auto;
    margin: 0 auto;
    width: 100%;
}

.carousel-inner {
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 800px;
}

希望得到答案！

Answer 2

对图像使用以下样式：

<img style="height:auto; width: 100%;" src="abc.jpg" alt="IMAGE" > 

希望它有效。

问候。

Answer 3

如果我理解正确，你的问题是当图像缩放到全宽时如何限制图像的高度？

一种解决方案可能是为它设置一个固定的高度（可能是max-height）。这可以使用ie height: 200px完成，但即使图像水平缩放，扭曲/拉伸图像也会迫使图像始终具有垂直尺寸。

要防止您将div标记与背景图片而不是img标记一起使用。当照片作为背景图像放置时，我们有更好的选项来控制它的大小：

<div style="
  background-image: url(images/slide1).jpg;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: 100%;
"></div>

这应该会导致图像保持在200像素高的块，同时通过切断在块外部生长的照片的部分来保持照片比率。