CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 14198

fit container of resized image with fixed ratio

I have an image that I scale down by using a div container. Unfortunately the container adapts the width of the full size of the image. How can I make the container fit the containing image?

.container {
  height: 30px;
  background: black;
}

img {
  height: 100%;
  width: auto;
}
<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" alt="">
</div>

Upvotes: 0

Views: 46

Answers (3)

VXp
VXp

Reputation: 12058

You can give the .container display: inline-flex:

.container {
  display: inline-flex;
  height: 30px;
  background: black;
}

img {
  height: 100%;
  width: auto;
}
<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" alt="">
</div>

Upvotes: 0

Akash Agrawal
Akash Agrawal

Reputation: 2299

Is this what you are looking for?

.container {
  height: 30px;
  background: black;
  display: inline-block;
}

img {
  height: 100%;
  width: auto
}
<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" />
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

Make the container display:inline-block and it will collapse to the width of the contents.

.container {
  height: 30px;
  background: black;
  display: inline-block;
}

img {
  height: 100%;
  width: auto
}
<div class="container">
  <img src="https://compass-ssl.microsoft.com/assets/bc/84/bc84e95b-76b9-4b24-ad5f-9748a2d75b1b.svg?n=microsoft_account_logo_color.svg" />
</div>

Upvotes: 1

Related Questions