如何在图像上同时使用宽度：100% 和高度：自动

Question

I would like to automatically adjust the height of my image according to the height of my text.

I tried using height: auto and width: 100% on my image (which seemed to make the most sense to me) but it doesn't work.

What I have

CodePen Example: https://codepen.io/JeremyWeb/pen/wvJPboW

 * { padding: 0; margin: 0; }.container { display: flex; align-items: flex-start; border: solid 4px red; padding: 5px; }.text { width: 50%; border: solid 4px black; padding: 5px; }.img-container { width: 50%; height: auto; max-height: 100%; box-sizing: border-box; border: solid 4px black; padding: 5px; }.img { height: auto; width: 100%; object-fit: cover; }

 <div class="container"> <p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn't figure out. I mean, the guards searched cells multiple times to no avail, that we couldn't figure out.</p> <div class="img-container"> <img class="img" src="https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/> </div> </div>

What I want

In HTML/CSS vanilla if possible. Thank you.

Answer 1

I solve your problem with javascript. You can try my solution-

CSS

.img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

JS

imgDiv = document.getElementsByClassName('img-container')[0];
textHeight = document.getElementsByClassName('text')[0].offsetHeight;
imgDiv.style.height = textHeight + 'px';

Working fiddle - https://jsfiddle.net/os9ht6fe/

Answer 2

One way of doing this is to put the image as a background to an after pseudo element to the text element. That way you are sure of getting the same height.

This snippet uses the CSS calc function to work out the required dimensions and sets the image to cover as requested.

 * { padding: 0; margin: 0; }.container { --ppx: 5px; /* padding */ --bpx: 4px; /* border */ display: flex; align-items: flex-start; border: solid var(--bpx) red; padding: var(--ppx); }.text { width: 50%; border: solid var(--bpx) black; padding: var(--ppx); position: relative; }.text::after { position: absolute; background-image: url(https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max); background-size: cover; background-repeat: no-repeat no-repeat; background-position: center center; content: ''; top: calc(var(--bpx) * -1); left: calc(100% + var(--bpx) + var(--ppx)); width: calc(100% - (4 * var(--bpx)) - (7 * var(--ppx))); height: calc(100% - (2 * var(--ppx))); border: solid var(--bpx) black; padding: var(--ppx); }

 <div class="container"> <p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn't figure out. I mean, the guards searched cells multiple times to no avail, that we couldn't figure out.</p> </div>

The image is centered both horizonatlly and vertically. Obviously that can be changed if required. And if the padding/border values differ between the main container and the text element then further CSS variables can be defined and used in the calculations.

I wasn't sure about the padding around the image. Is that required? If so further calculation is required and we can't probably use the convenience of cover. (Or we introduce two pseudo elements to allow them to be sized differently). Let me know if required.

Answer 3

Based on Haworth's method, another way would be to use a background image on an empty div and using the min-height property.

 .container { display: flex; }.text { width: 50%; }.img-container { width: 50%; min-height: 100%; background-image: url("https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"); background-size: cover; background-position: center; }

 <div class="container"> <p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn't figure out. I mean, the guards searched cells multiple times to no avail, that we couldn't figure out.</p> <div class="img-container"></div> </div>