Same height and width on page resize

Question

I am using bootstrap with Angular 9 and a rounded profile picture. If I put width: 19rem and height: 19rem the picture keeps rounded but when I have a smaller resolution it overflows onto the next column.

Is there any way to keep width 100% and the height dynamically changes so it has the same aspect ratio (rounded)?

Thank you so much!

.mainImage {
  height: 19rem;
  width: 19rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  border: 5px #35c68f solid;
}

why `rem` and why not `%`? Read [are-rem-units-only-useful-for-font-size?](https://stackoverflow.com/questions/26361748/are-rem-units-only-useful-for-font-size) and [CSS Units](https://stackoverflow.com/questions/26361748/are-rem-units-only-useful-for-font-size) — Roy Bogado, Apr 21 '20 at 11:03
check out https://css-tricks.com/aspect-ratio-boxes/ for other use cases — bruno, Apr 21 '20 at 11:06

score 1 · Answer 1 · answered Apr 21 '20 at 11:04

Use view port:

fiddle to check responsiveness.

.mainImage {
  height: 15vw;
  width: 15vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  border: 5px #35c68f solid;
}

<div>
  <img class="mainImage" src="http://placekitten.com/301/301">
</div>

on 65vm size:

.mainImage {
  height: 65vw;
  width: 65vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  border: 5px #35c68f solid;
}

<div>
  <img class="mainImage" src="http://placekitten.com/301/301">
</div>

score 0 · Answer 2 · answered Apr 21 '20 at 11:07

0

If what I understand is: if you want all image to fit a rounded circle, you can include this to image

img = { object-fit: cover; }

answered Apr 21 '20 at 11:07

Oghomwen Oguns

161
1
7

Same height and width on page resize

2 Answers2