使图像适合其全屏宽度

Question

我正在尝试将图像放到浏览器的整个宽度上。请让我知道CSS代码。我正在使用px作为容器。所以让我知道。我不希望滚动条到浏览器的全屏。我正在尝试宽度：100％，宽度为px。但没有任何效果我看到滚动条。

Answer 1

如果您希望它依赖于浏览器的视口，请将其添加到元素的css中，它会自动拉伸

background-size: 100% 100%;

Answer 2

img{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

Answer 3

图片在CSS中有自己的显示类型，所以当你说width:100%这样的内容时，它会填充100％的原始图像尺寸而不是像块一样展开并扩展到100％父元素。

您可以通过更改显示类型来解决此问题，但仅针对该图像：

<style type="text/css">
  img.big-img {
    display:block;
    width:100%;
  }
</style>

…

<img src="my_image.jpg" class="big-img">