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

时间:2010-08-11 23:34:50

标签: html width css

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

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

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

10 个答案:

答案 0 :(得分:180)

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

答案 1 :(得分:8)

在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宽的图像。

答案 2 :(得分:3)

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

答案 3 :(得分:1)

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

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

答案 4 :(得分:0)

如果图像小于父...

.img_100 {
  width: 100%;
}

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

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

Full Width Containers in Limited Width Parents

答案 7 :(得分:0)

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

答案 8 :(得分:-1)

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

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

答案 9 :(得分:-3)

我会使用属性display: table-cell

以下是link