CODEWITHSUNDEEP
htmlcssangular
Ka Tech
Ka Tech

Reputation: 9457

Maintain Aspect ratio for width @ 100%

In Angular 2 I have a img set which is within a container. I want the image to be 100% of width of the container but the height to be the same apect ratio with respect to the width.

For example if I had the image of 500px x 250px (WxH). The container is 1000px. When I set the image to 100% of the container width the height will be 500px. Is this possible? So far I have done:

<div>
      <img style="max-width: 100%;width:auto; height:auto;" [src]="mediaURL" />
</div>

Doesn't really work. If the photo is smaller than the container it will lock the aspect ratio with the original width (ie width doesn't go to 100%). If the photo width is larger than the container the height sticks to the original height.

Upvotes: 1

Views: 1763

Answers (1)

DragonBorn
DragonBorn

Reputation: 1809

Remove the height from the image and give your container height: auto;. Check the snippet.

div{
  width: 1000px;
  height: auto;
  background: black;
}

img {
  width: 100%;
}
<div>
      <img  src="https://dummyimage.com/500x250/918c91/0011ff.jpg" />
</div>

Upvotes: 1

Related Questions