img 宽度 100% 显示：box（css flexbox 父级）

发布于 2024-10-26 05:19:51 字数 329 浏览 0 评论 0原文

我正在尝试将图像的大小调整为其父 div 的宽度；通常 width: 100%; 工作正常，但是当父级有 display: box; 时，img 不会调整大小。给子图像设置 box-flex: 1 没有效果。

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
  <img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>

原文

I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
  <img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>

分享到QQ

分享到微博

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

发布评论

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

永不分离 2024-11-02 05:19:51

也许你已经解决了这个问题，但你可以使用（为mozilla提供示例）

IMAGE {
  display: -moz-box;
  -moz-box-flex: 1;
}
#cont {
  -moz-box-orient: horizontal;
  display: -moz-box;
}

尚未测试该示例，在最坏的情况下你需要进行一些调整，但我很确定它是正确的。

Maybe you have solved this, but you can use (Providing example for mozilla)

IMAGE {
  display: -moz-box;
  -moz-box-flex: 1;
}
#cont {
  -moz-box-orient: horizontal;
  display: -moz-box;
}

Haven't tested the example and in worst case you need to make some tweek, but i'm pretty sure it's correct.

回复收藏 0 原文

爱要勇敢去追 2024-11-02 05:19:51

诚然，这是一个老问题，但是，它仍然出现在搜索中，因此想要更新答案：

当前在 Chrome 23 和 Firefox Nightly 21.0a1 中，此布局可以保持图像的父 div 大小并调整大小（以及保持居中）。

http://jsfiddle.net/qAErr/

HTML

<section id="holdMe">
  <div>
     <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
  </div>
</section>

CSS

#holdMe {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
    }
    #holdMe img {
      width: 100%;
    }

Granted this is an old question, however, it still shows up in searches so wanted to update with an answer:

Currently in Chrome 23 and Firefox Nightly 21.0a1 this layout works to keep the image the size of the parent div and resize (along with keeping it centered).

http://jsfiddle.net/qAErr/

HTML

<section id="holdMe">
  <div>
     <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
  </div>
</section>

CSS

#holdMe {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
    }
    #holdMe img {
      width: 100%;
    }

回复收藏 0 原文