Question

我试图获得一个图像（动态放置，对尺寸没有限制）与其父div一样宽，但只要该宽度不宽于100％的宽度。我试过这个，但无济于事：

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

这些图像中的许多图像比它们的父图像宽，这就是为什么我希望它们相应地调整大小，但是当一个小图像在那里弹出并且放大超出其正常尺寸时，它看起来真的很糟糕。有没有办法做到这一点？

Answer 1

只需单独指定max-width: 100%即可。

Answer 2

在Google搜索上发现此帖子，由于@jwal回复，它解决了我的问题，但我在他的解决方案中添加了一个。

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

通过上面我将max-width更改为我的图像所在的内容容器的尺寸。在这种情况下，它是：容器宽度 - 填充 - boarder =最大宽度

这样我的图像就不会突破包含的div，我仍然可以将图像浮动到内容div中。

我已经在IE 9，FireFox 18.0.2和Chrome 25.0.1364.97，Safari iOS中进行了测试，似乎可以正常运行。

附加：我在宽度为678px（最大宽度）的1024px宽图像上进行了测试，并以500px（图像宽度）显示500px宽的图像。

Answer 3

设置宽度为100％是div的全宽，而不是原始的全尺寸图像。没有JavaScript或其他可以测量图像的脚本语言，就无法做到这一点。如果你可以有一个固定宽度或固定高度的div（如200px宽），那么它不应该太难以给图像一个填充范围。但是如果你将一个20x20像素的图像放在一个200x300像素的盒子中，它仍然会被扭曲。

Answer 4

线条样式-每次都对我有用

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

Answer 5

如果图像小于父...

.img_100 {
  width: 100%;
}

Answer 6

我也遇到了同样的问题，但是我将CSS中的height值设置为 auto ，这解决了我的问题。另外，不要忘记执行display属性。

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }

Answer 7

我找到了一个对我有用的答案，可以在以下链接中找到

：

Full Width Containers in Limited Width Parents

Answer 8

我发现 max-width:inherit; 对我有用

Answer 9

您应该设置最大宽度，如果需要，还可以在侧面之一上设置一些填充。在我的情况下，最大宽度：100％很好，但是图像恰好在屏幕末端附近。

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Answer 10

我会使用属性display: table-cell

以下是link

使图像宽度为父div的100％，但不大于其自身的宽度

10 个答案: