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

Posted 2023-03-06

【中文标题】使图像宽度为父 div 的 100%，但不大于其自身宽度

【英文标题】：Make an image width 100% of parent div, but not bigger than its own width

【发布时间】：2011-03-28 16:18:14

【问题描述】：

我试图让图像（动态放置，没有尺寸限制）与其父 div 一样宽，但前提是该宽度不超过其自身 100% 的宽度。我试过了，没有用：

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

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

【问题讨论】：

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

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

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

kbrimington 确实带来了好处。根据reference.sitepoint.com/css/max-width#compatibilitysection IE8 的实现是错误的。

【参考方案1】：

只需单独指定max-width: 100%，就可以了。

【讨论】：

Chromium 似乎只是将其保持在 100%，而不管上下文如何。也许我应该停止不断地查看我在测试版软件方面的工作。谢谢！

如何在不使用最大宽度的情况下做到这一点：100%。在 React-Native 中，不能使用百分比。

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

【参考方案2】：

在 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 中进行了测试，并且似乎可以正常工作。

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

【讨论】：

使用 width:auto !important; 为我解决了 IE11 中的一个问题，即图像大于其容器并且 IE11 无法缩小图像。在img 选择器中设置此项可在 IE11 中对问题进行排序。然而，在没有其他规则的情况下设置 width:100%; 在 IE11 中没有任何作用。因此，必须包含“覆盖”才能使图像缩小到其容器的大小。

带像素值的最大宽度可以解决问题。谢谢！

【参考方案3】：

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

【讨论】：

请尽可能提供一个工作示例。推荐This。 :)

【参考方案4】：

线条样式 - 这对我每次都有效

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

【参考方案5】：

您应该设置最大宽度，如果需要，您还可以在其中一侧设置一些填充。在我的情况下， max-width: 100% 很好，但图像就在屏幕末尾。

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

【参考方案6】：

我也遇到了同样的问题，但我将 CSS 中的高度值设置为 auto 并解决了我的问题。另外，不要忘记做显示属性。

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

【讨论】：

仅供参考..您可以删除 height:auto 和 width:auto。最大高度和最大宽度是一回事。

【参考方案7】：

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

Full Width Containers in Limited Width Parents

【参考方案8】：

我发现 max-width:inherit; 为我工作

【参考方案9】：

我写了这段代码：

div.image 
   height: auto;
   width: 100%;


div.image img 
    height: inherit;
    width: inherit;

【参考方案10】：

如果图像小于父级...

.img_100 
  width: 100%;

【参考方案11】：

我会使用属性display: table-cell

这里是link