Make image keep aspect ratio when screen size changes

Asked Jul 02 '19 at 06:47

Active Jul 02 '19 at 08:49

Viewed 50 times

I have this iframe, which depending on the situation can contain a video, and if unavailable an image - the problem I seem to be having is that the image is not being responsive enough to scale itself based on the screen size - it just cuts off the part that is outside the container.

This is what I currently have.

.parent {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.parent__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <iframe class="parent__wrapper" src="https://placekitten.com/566/313" frameborder="0" scrolling="no"></iframe>
</div>

https://jsfiddle.net/onze9y0a/3/

How do I make it avoid cutting the sides or buttons as the screen size changes?

edited Jul 02 '19 at 08:49

Temani Afif

245,468
26
309
415

asked Jul 02 '19 at 06:47

Bow

@xmaster still same result.. – Bow Jul 02 '19 at 06:55
include in buttons in your code for a better example – xmaster Jul 02 '19 at 06:56
@xmaster not sure i understand, I've changed the percentage to viewport as you suggested - still same response. – Bow Jul 02 '19 at 06:59
> You can just add the max-width: 100%; and height: auto; on image. – Mak0619 Jul 02 '19 at 06:59
@MayankGupta that does not keep the aspect ratio of the image, and still cut the image.. – Bow Jul 02 '19 at 07:03
1

The problem is your image is being loaded from some other html document which contains a image or video. So that html document should have necessary css which makes width and height of img element to 100%. Since you are loading it into iframe still it is a seperate page from its parent. – Daniel A Sathish Kumar Jul 02 '19 at 07:16
So writing styles in parent document will not cause anything to the elements that are resides in the iframe. – Daniel A Sathish Kumar Jul 02 '19 at 07:18
FYR https://stackoverflow.com/questions/6494721/override-body-style-for-content-in-an-iframe – Daniel A Sathish Kumar Jul 02 '19 at 07:20

Make image keep aspect ratio when screen size changes

0 Answers0