Image height same as article tag

user_10099705 0
Viewed 79

I have an image tag that appears inside an article tag, like this...

article {
  border: 1px solid;
}

img {
  float: left;
}
<article>
  <h1>Image title</h1>
  Some text here
  <img src="http://placekitten.com/200/300" alt="">
</article>

I want the height of the image to be the same as the height of the rest of the stuff in the article tag (so that the top of the title is at the same line as the top of the image, and the bottom of the text is at the same line as the bottom of the image). I tried adding height: 100%; inside style but that didn't work. Thank you!

enter image description here

css image html
2 Answers

It depends on the height of the Image. You need to play around with the values, to find a good ratio.

article {
  display: flex;
  flex-direction: row;
  border: 1px solid;
}

.article-img {
  width: 6em;
}
.article-img > img {
  width: 100%;
}

.article-details {
  padding-bottom: 2em;
  width: 100%;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<article>
  <div class="article-img"><img src="http://placekitten.com/200/300" alt=""></div>
  <div class="article-details">
    <div><h1>Image title</h1></div>
    <div>Some text here</div>
  </div>
</article>

user_138801600

Provide a height or max-height to the article and make the image relative to the article with a height and max-height of 100%. Without the specified height on the article, the article will stretch to the size of the image if it is larger.

Also, there are some issues with the float that need to be addressed. Apply the "clear fix" method to the article, wrap the h1 and text in a div, and float the div next to the image.

article {
  height: 150px;
  border: 1px solid;
  position: relative;
}

article:after {
  content: " ";
  display: block;
  clear: both;
}

img {
  float: left;
  position: relative;
  height: 100%;
  max-height: 100%;
}

div {
  float: left;
}
<article>
  <img src="http://placekitten.com/200/300" alt="">
  <div>
    <h1>Image title</h1>
    <p>Some text here</p>
  </div>
</article>

user_80749490
Related