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

发布于 2024-09-13 13:56:59 字数 266 浏览 6 评论 0原文

我试图让图像（动态放置，对尺寸没有限制）与其父 div 一样宽，但前提是该宽度不比 100% 时其自身宽度宽。我已经尝试过这个，但没有成功：

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

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

原文

I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:

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

Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聚集的泪 2024-09-20 13:56:59

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

回复收藏 0 原文

指尖凝香 2024-09-20 13:56:59

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

另外：我在以 678 像素（最大宽度）显示的 1024 像素宽的图像和以 500 像素（图像的宽度）显示的 500 像素宽的图像上进行了测试。

Found this post on a Google search, and it solved my issue thanks to @jwal reply, but I made one addition to his solution.

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

With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width

This way my image won't break out of the containing div, and I can still float the image within the content div.

I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.

Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).

回复收藏 0 原文

仲春光 2024-09-20 13:56:59

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

回复收藏 0 原文

海未深 2024-09-20 13:56:59

线条风格 - 这每次都适合我

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

In line style - this works for me every time

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

回复收藏 0 原文

〃安静 2024-09-20 13:56:59

我写了这段代码：

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

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

I wrote this code:

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

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

回复收藏 0 原文

美煞众生 2024-09-20 13:56:59

max-width: fit-content; 对我有用。

回复收藏 0 原文

掩耳倾听 2024-09-20 13:56:59

您应该设置最大宽度，如果需要，您还可以在一侧设置一些填充。就我而言，最大宽度：100% 很好，但图像就在屏幕末端旁边。

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

You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.

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

回复收藏 0 原文

情绪 2024-09-20 13:56:59

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

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

I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.

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

回复收藏 0 原文