Reskk Reskk - 2 months ago 7
CSS Question

Flexbox - Weird img sizing issue

Weird issue keeps happening with this.

I want one of my flex items (an image) to be set to certain dimensions (w:300px h:300px).

When I open it to preview in my browser the image appears squashed up in the container as a flex item would normally behave (the text takes up most of the space.)

As soon as I resize my browser by even 1px the img then resizes to its specified dimensions (w:300px h:300px).

Is this what is supposed to happen? I'm using the Treehouse workspace text editor so I don't know if it's a bug with that or I'm doing something wrong?

Thanks,

<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>


CSS:

.con {
display: flex;
background: gainsboro;
font-size: 1.8em;
}

.con img {
width: 300px;
height: 300px;
margin: 0 10px;

}


Here's a screenshot of what it looks like when I open to preview:
http://imgur.com/a/Ejp8R

Here's what it looks like as soon as I expand the browser:
http://imgur.com/a/xT5Yr

Answer

I suggest you to use min-width property. It will help you to avoid the weird img stretching.

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

.con {
  display: flex;
  background: gainsboro;
  font-size: 1.8em;
}
.con img {
  min-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>