Question

我之前已多次这样做过但现在似乎无论如何都无法工作。我希望图像是容器的宽度，但它不是。有什么想法吗？

代码：

＆＃13;

img {
  max-width: 100%;
  max-height: 100%;
}
div {
  background: #ccc;
}

＆＃13;

<div>
  <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>

＆＃13;

Answer 1

只需将宽度：100％添加到img

即可

img {
    width:100%
}

Answer 2

查看你的课程，你应该添加的是full-width类上的一些CSS，以使img宽度达到100％。这样，只有图像设置为＆＃34;全宽＆＃34;将被迫100％。另一个将max-width规则保持为100％，但如果它们更小则不会调整大小。

＆＃13;

img {
  max-width: 100%;
  max-height: 100%;
}
.full-width {
  width: 100%;
}
div {
  background: #ccc;
}

＆＃13;

<div>
  <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>

＆＃13;

Answer 3

只需将图片宽度设为100％即可。即使您调整容器图像的大小也适合它。

img{
width:100%;
}

Answer 4

您可以查看更新的小提琴here

更改css：

div {
    height: 100%;
}

img {
   width: 100%;
   min-height: 100%;
}

Answer 5

我知道这不是你问题的直接答案，但一般来说，放大的图像看起来非常讨厌。人们通过这种方式的方法是让图像居中，然后在其后面添加模糊版本。

像这样：

＆＃13;

body {
  margin: 0;
}
.image {
  position: relative;
  text-align: center;
  overflow: hidden;
  font-size: 0px;
}
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg');
  background-size: cover;
  z-index: -1;
}
.blur {
  filter: blur(10px);
}

＆＃13;

<div class="image">
  <div class="background-image blur"></div>
  <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>

＆＃13;

我希望你觉得这很有用。

Answer 6

因为您的图片高度为600px;，并且您设置了max-width:100%。因此，max-width属性仅在父潜水小于600px;时才有效。

要将图像制作到包含div，您必须将set image的属性设置为100％;那是.full-width {width: 100%;}

图像适合包含Div

6 个答案: