CSS image max-height doesn't keep aspect ratio

user_12034488 0
Viewed 556

Video preview

I have a popup modal which has a fixed position with 100% width and height.

The content in the modal has max-width: 90%; and max-height: 90%

The image also has these values but the problem is that it doesn't keep the aspect ratio when changing the height, but has it when changing the width. (The video explains it all)

#popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.popupModal {
  max-width: 90%;
  max-height: 90%;
  background: linear-gradient(0deg, #fff, #f0f0f0);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100px);
  transition: transform 0.5s;
}

.closeBtn {
  position: absolute;
  top: -25px;
  right: -25px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 24px;
  font-weight: bold;
  color: $blue-dark;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  -moz-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.2s ease;
}

.closeLine {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #072742;
  height: 4px;
  width: 50%;
}

#closeLineOne {
  transform: rotate(45deg);
}

#closeLineTwo {
  transform: rotate(135deg);
}

.closeLine:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.popupActive {
  opacity: 1;
  z-index: 5000;
  transition: z-index 0s 0s, opacity 0.5s 0s;
}

.popupModal {
  transform: translateY(0);
}

.metalModal {
  height: 80%;
  background: transparent;
}

.metalPopup {
  display: flex;
  flex-direction: column;
  // It works if I change the max-height to height, but it then stretches out all other images.
  max-height: 100%;
  max-width: 100%;
  position: relative;
}

.metalImg {
  max-width: 100%;
  flex: 1;
  object-fit: cover;
  max-height: 100%;
  width: auto;
  height: auto;
}

.metalName {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: 0;
  left: 0;
}
<div id="popup" class="popupActive">
  <div class="popupModal metalModal">
    <div class="metalPopup">
      <div class="closeBtn">
        <span id="closeLineOne" class="closeLine"></span>
        <span id="closeLineTwo" class="closeLine"></span>
      </div>
      <img src="https://i.imgur.com/BeWSEDB.jpg" class="metalImg" />
      <div class="metalName">
        Metal name
      </div>
    </div>
  </div>
</div>

EDIT:

The image keeps the aspect ratio when I give the .metalPopup class display: block. But it makes so that the width stays as the original img width, even though the image is a fraction of the whole block.

^ See here.

css html
4 Answers

So I just changed .metalPopup max-height to just height: 100%; and it seems to work now and doesn't stretch the image, because the .metalImg now has max-height that removes the height of .metalName (Which is now position: relative, because it doesn't center the modal responsively if I want to, but can still be added to relative positioning and just subtract the height of it).

#popup {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.popupModal {
  max-width: 90%;
  max-height: 90%;
  background: linear-gradient(0deg, #fff, #f0f0f0);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100px);
  transition: transform 0.5s;
}

.closeBtn {
  position: relative;
  top: 25px;
  margin: 0 0 0 auto;
  right: -25px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 24px;
  font-weight: bold;
  color: $blue-dark;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  -moz-box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  box-shadow: 0 0 27px -10px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.2s ease;
}

.closeLine {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #072742;
  height: 4px;
  width: 50%;
}

#closeLineOne {
  transform: rotate(45deg);
}

#closeLineTwo {
  transform: rotate(135deg);
}

.closeLine:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.popupActive {
  opacity: 1;
  z-index: 5000;
  transition: z-index 0s 0s, opacity 0.5s 0s;
}

.popupModal {
  transform: translateY(0);
}

.metalModal {
  height: 80%;
  background: transparent;
}

.metalPopup {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  position: relative;
}

.metalImg {
  max-width: 100%;
  object-fit: cover;
  max-height: calc(100% - 130px);
}

.metalName {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.75);
}
<div id="popup" class="popupActive">
  <div class="popupModal metalModal">
    <div class="metalPopup">
      <div class="closeBtn">
        <span id="closeLineOne" class="closeLine"></span>
        <span id="closeLineTwo" class="closeLine"></span>
      </div>
      <img src="https://i.imgur.com/BeWSEDB.jpg" class="metalImg" />
      <div class="metalName">
        Metal name
      </div>
    </div>
  </div>
</div>

user_120344880

If you set height it's usually a good idea to make the width auto and vice versa.

.yourclass {
max-height: 90%;
max-width: (either unset or auto)
}
user_143578690

You can make use of aspect-ratio in CSS to maintain a specific ratio of the video.

video {
   width: 90%;
   aspect-ratio: 16/9 ; // due to this video will maintain aspect ratio of 16/9
}

this is almost supported by all modern browsers and will make you write less code.

user_136165160

how about this. does it work for you?

img {
  width: auto;  
  height: auto;  
  max-width:90%;
  max-height:90%;
}
user_28873980
Related