全宽图像容器

Question

我希望在引导程序的容器中拥有全宽响应图像。我使用的图像的大小是800乘667.当我使用下面的代码时，会发生什么是在大屏幕中图像没有完全缩放。有人可以帮帮我吗？

 <div class="myDiv">
        <img class="myImage" src="...." >
    </div>

的CSS：

.myDiv {
    padding: 0;
}
.myImage {
    max-width: 100%;
    height: 500px;

}

Answer 1

你有一个固定的高度。尝试设置高度：auto;保持规模

Answer 2

您应该删除max-width并将其替换为width。

如果要将其设置为特定高度，请使用transform: scaleX(), scaleY()上的image属性。

.myImage {
    transform: scaleX(1.5); //scales the image 1.5 times for the X-axis
}

.myDiv {
  padding: 0;
}
.myImage {
  width: 100%;
}

<div class="myDiv">
  <img class="myImage" src="http://instantentity.com/wp-content/uploads/2016/02/Instant-Entity-CSS.jpg">
</div>