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

125

我正在尝试使图像（动态放置，不受尺寸限制）的宽度与其父div一样宽，但前提是该宽度不比其自身的宽度100％宽。我已经尝试过了，但无济于事：

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

这些图像中的许多图像都比其父div宽得多，这就是为什么我希望它们进行相应调整的原因，但是当一个小图像弹出并放大到超出其正常尺寸时，它看起来确实很糟糕。有什么办法吗？

html width css

— 阿方索
source

5

如果仅指定会发生什么max-width: 100%？

— Fyodor Soikin，2010年

@Fyodor Soikin-给出答案，我会投票给你。

— Gert Grenander 2010年

不过，最好考虑一下哪些浏览器支持最大宽度。

— kbrimington

kbrimington确实为餐桌带来了好处。根据 reference.sitepoint.com/css/max-width#compatibilitysection，IE8 的实现存在问题。

— 阿方索

221

仅指定max-width: 100%一个，就应该这样做。

— 费奥多·索金（Fyodor Soikin）
source

1

无论背景如何，铬似乎都只是将其保留为100％。也许我应该停止不断地研究我在Beta版软件上的工作。谢谢！

— 阿方索

如何不使用max-width：100％。在React-Native中，无法使用百分比。

— Croolsby

@Croolsby您可以在react-native中使用百分比，但是使用字符串值，例如“ 100％”

— Rafael Hovsepyan

9

在Google搜索上找到了这篇文章，并通过@jwal的回复解决了我的问题，但是我对他的解决方案做了补充。

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

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

这样，我的图片就不会脱离包含div的内容，而且我仍然可以将图片浮动在内容div中。

我已经在IE 9，FireFox 18.0.2和Chrome 25.0.1364.97，Safari iOS中进行了测试，并且似乎可以使用。

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

— 马陶兰
source

1

使用width:auto !important;修复了IE11中的一个问题，该问题是图像将大于其容器，并且IE11无法按比例缩小图像。在img选择器中进行设置可以解决IE11中的问题。但是，width:100%;没有其他规则的设置在IE11中没有任何作用。因此，必须包含“替代”，以使图像缩小到其容器的大小。

— lowtechsun

3

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

— 阿曼达
source

1

请尽可能提供一个工作示例。这个建议。:)

— bhb 2012年

1

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

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

— 内莱斯
source

0

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

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

— 结合
source

0

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

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

— 诺亚·佛朗哥（Noah Franco）
source

只是一个fyi ..您可以删除height：auto和width：auto。max-height和max-width是同一件事。

— 黛比·库斯

0

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

宽度有限的父级中的全宽容器

— 文字
source

-1

如果图像小于父图像...

.img_100 {
  width: 100%;
}

— 桑德罗·马克斯
source

-4

我会用财产 display: table-cell

这是链接

— 整洁的
source