How do i make this image always the same height as a neighboring division?

HTML & CSS
1

I am trying to make a website separated into boxes, with an image link, and a textbox side by side. this is my code:

<div class="row">
	<div class="w50 textbox-1">
		<h1>Cafe</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda. Quisquam illo voluptatibus repellendus mollitia quos maxime quas laborum. Perspiciatis hic, accusamus.Aenean ut risus sodales elit sodales sodales eu sit amet quam. Curabitur feugiat nibh eu imperdiet porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras auctor, tortor sed ornare vestibulum, erat erat semper ligula, at aliquam justo purus at massa. Vestibulum magna justo, dapibus blandit faucibus at, pharetra quis nulla.
		</p>
	</div>
	<div class="w50">
		<a href="#">
			<img src="img/Cafe.JPG" alt="broken image" width="100%">
		</a>
	</div>
</div>

body {
	margin: 0;
	background-color: #FFEEDD;
}

.textbox-1 {
	font-size: 1.25em;
	text-align: justify;
}

p {
	padding: 50px;
}

.w50 {
	width: 50%;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

What I want to do is make it so the image link is always the same height as the textbox, without stretching the image or widening the page.

2

Hi,

I often find with these types of questions that people don’t really understand what they are asking for:)

For an image not to appear stretched it has to maintain its aspect ratio which means than in order to fit a box that is not the same size as its aspect ratio then the image has to overflow and then be cropped in one direction allowing both dimensions to fill the container. This means an image can never look exactly the same after this affect has taken place. This in effect is exactly what object-fit does (not supported in IE11 yet) for foreground images and what background-size:cover does for background images.

Therefore the easiest solution would be to use a background image and use background-size:cover.

If it must be a foreground image and good browser support is required then you can use a technique that almost mimics object-fit and looks like this:

Note that the height of the boxes is set by the text and should you have no text then you have no image either (but that is exactly what you asked for). Also note that if the window is narrow and the textbox becomes very tall then so does the image and there will be little of the original content of the image showing because it will be sized many times greater to make sure it fits and maintains the aspect ratio.

Hope that all makes sense. :slight_smile:

4 Likes
3

yes, this is perfect, thank you for putting so much effort into your reply.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.