Question

奇怪的问题一直在发生。

我希望将我的一个flex项（图像）设置为特定尺寸（w：300px h：300px）。

当我打开它以在我的浏览器中预览时，图像会在容器中被压扁，因为弹性项目通常会起作用（文本占据了大部分空间。）

一旦我将浏览器的大小调整为1px img，然后调整到指定的尺寸（w：300px h：300px）。

这是应该发生的吗？我正在使用Treehouse工作区文本编辑器，所以我不知道它是否是一个错误或我做错了什么？

谢谢，

.con {
  display: flex;
  background: gainsboro;
  font-size: 1.8em;
}
.con img {
  width: 300px;
  height: 300px;
  margin: 0 10px;
}

<div class="surgery con">
  <img src="../img/cloud.jpg">
  <p>Lorem ipsum dolor sit amet, urna sollicitudin pede sollicitudin fusce adipiscing vitae. Commodo egestas. Ut tempus, molestie integer in integer, pellentesque sed egestas duis, commodo sapien pellentesque turpis nulla tempor.</p>
</div>

以下是我打开预览时的截图： http://imgur.com/a/Ejp8R

这是我扩展浏览器时的样子： http://imgur.com/a/xT5Yr

Answer 1

我建议您使用min-width属性。它可以帮助你避免奇怪的img伸展。

JsFiddle：https://jsfiddle.net/5pbqfyam/

＆＃13;

.con {
  display: flex;
  background: gainsboro;
  font-size: 1.8em;
}
.con img {
  min-width: 300px;
  height: 300px;
  margin: 0 10px;
}

＆＃13;

<div class="surgery con">
  <img src="../img/cloud.jpg">
  <p>Lorem ipsum dolor sit amet, urna sollicitudin pede sollicitudin fusce adipiscing vitae. Commodo egestas. Ut tempus, molestie integer in integer, pellentesque sed egestas duis, commodo sapien pellentesque turpis nulla tempor.</p>
</div>

＆＃13;

Flexbox - 奇怪的img大小调整问题

1 个答案: