Question 45866 in CSS Question posted in
Some basic documentation can be found here.

CSS – Image behaves differently than div

.d1 {
  border: 1px solid black;
  display: flex;
  width: 300px;
  height: 300px;
}
<div class="d1">
  <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
</div>

Why does an images also stretch to the very end of a flexbox’s width? Shouldn’t it only stretch towards the very bottom, like a div element does inside a flexbox container?

Tags:

2

Answers


  1. 0

    you can control the maximum width and maximum height of the image, so it can solve your problem easily.

    just add max-width and max-height to the image with CSS, and put your own values to them.

    Login or Signup to reply.
  2. 0

    Check this example; if the width of the div content is smaller, it does not take the whole width of the parent by default. Same applies to the image. You need to set a specific width and height otherwise:

    .d1 {
  border: 1px solid black;
  display: flex;
  width: 300px;
  height: 300px;
}
.d1 img {
  width: 200px;
  height: 300px;
}
.d1 div {
  background-color: red;
}
    <div class="d1">
  <div>Example Paragraph.</div>
</div>
<div class="d1">
  <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search