Fill an image to the height of a div

Hi,

I have an image that I would like to fill the height of a div, but not sure how to do this. I’ve tried overflow: hidden, but it didn’t work.

This is my HTML

<div class="col-md-5 pad-x-0 about-us-image">
<img src="assets/img/about.jpg" class="img-responsive">
</div>

Any ideas?

Thanks!

…and this is my CSS. :rolleyes:

If you have a little spare time, you
could also show us your image. :winky:

coothead

I just know, seeing that mess, that I am
going to regret my previous post. :unhappy:

coothead

I tried this CSS:

.about-us-image{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden!important
}

.about-us-image img{
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}

That CSS seems to be working fine, although all you really need is to give the image a height: 100%;

Thanks, I’ve tried to give it a height of 100% which works but the image is appearing below the div to the right of it. It seems the overflow hidden isn’t working.

The overflow: hidden; wouldn’t be necessary to just have the image scale to the height of the div… but if you need it anyway, there’s a semicolon missing in that line.

I’ve added the semicolon. The image is actually taller than the right hand side div next to it so its appearing a different height. How would Is top this from happening? I thought the above code would do it, but its not.

I’m still struggling to work this out.

I have 2 divs - one with an image on the left and one on the right which has a background colour and text in.

What i am trying to do is to have the image on the left fill the exact height of the right div even if the image is taller than the right div.

I also need this to be responsive.

What would be the best way to do this?

Thanks!

You could use display:table or display:flex and simply apply a background image to the empty div on the left.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.match-height {
	display:flex;
	justify-content:space-between;
}
.img, .text {
	flex: 0 0 40%;
	padding:10px;
}
.img {
	padding:0;
	position:relative;
	overflow:hidden;
	background:url(images/a1-red.jpg) no-repeat 50% 50%;
	background-size:cover;
}
.text {
	background:blue;
}
</style>
</head>

<body>
<div class="match-height">
  <div class="img"></div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium urna ligula, nec porttitor est venenatis a. Phasellus vel convallis nisl. Aliquam ac ullamcorper magna, a lobortis nisi. Cras in nisi vel tortor lobortis laoreet. Vestibulum fringilla fermentum nisl. Nullam vel nibh aliquet, suscipit lectus et, fermentum velit. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium urna ligula, nec porttitor est venenatis a. Phasellus vel convallis nisl. Aliquam ac ullamcorper magna, a lobortis nisi. Cras in nisi vel tortor lobortis laoreet. Vestibulum fringilla fermentum nisl. Nullam vel nibh aliquet, suscipit lectus et, fermentum velit. </p>
  </div>
</div>
</body>
</html>

If the image must be a foreground image then you could do this instead:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.match-height {
	display:flex;
	justify-content:space-between;
}
.img, .text {
	flex: 0 0 40%;
	padding:10px;
}
.img {
	padding:0;
	position:relative;
	overflow:hidden;
}
.img img {
	position:absolute;
	left:0;
	top:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
}
.text {
	background:blue;
}
</style>
</head>

<body>
<div class="match-height">
  <div class="img"><img src="images/a1-red.jpg" width="100" height="61" alt="Car"></div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium urna ligula, nec porttitor est venenatis a. Phasellus vel convallis nisl. Aliquam ac ullamcorper magna, a lobortis nisi. Cras in nisi vel tortor lobortis laoreet. Vestibulum fringilla fermentum nisl. Nullam vel nibh aliquet, suscipit lectus et, fermentum velit. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium urna ligula, nec porttitor est venenatis a. Phasellus vel convallis nisl. Aliquam ac ullamcorper magna, a lobortis nisi. Cras in nisi vel tortor lobortis laoreet. Vestibulum fringilla fermentum nisl. Nullam vel nibh aliquet, suscipit lectus et, fermentum velit. </p>
  </div>
</div>
</body>
</html>

Both the above assume that it is the text content that is to control the height of both divs.

3 Likes

Thanks. That worked, however, I don’t think it’s achieving what I would like.

I will try to explain in another way of what I would like to achieve:

I have an image on the left of a box of text which has a blue background.

What I am trying to do is to have the image align perfectly to the bottom of the right box on desktop and tablet (both the image and text box become slightly thinner) and then drop the text box under the image on mobile. I’m struggling to get the image to appear neatly and having it aligned nicely on all devices.

I looked into possibly using a data-interchange method, but wondered if there is another way round this?

Any suggestions?

Thanks

toolman, the word “nicely” is subjective. It does not convey dimensions.
What you seem to be describing is not realistic. Too many Batman comic books, not enough geometry. There can be only one point within a given width range where the text and image are the same height. When the text column narrows, its height increases. For the image to fit “perfectly” beside the text, its height would have to increase which means it’s width would increase, too, if it is to maintain its aspect ratio. Do you get the picture? Taller, thinner text means taller AND wider image. If aspect ratio is not important, then Paul’s methods should work.

If the height of the image does not matter, if only the placement of the bottom of the image, then that’s a whole different and very solvable issue. It may look funny to have a narrow column of text with a narrow image resting beside it at the bottom edge of the text (baseline), but easy to do.

Please clarify what you really, really want by drawing two or three or four images showing stages of transition. I’m at a loss to imagine what you are imagining without more guidance.

1 Like

G[quote=“toolman, post:11, topic:274971”]
I looked into possibly using a data-interchange method, but wondered if there is another way round this?
[/quote]
Sorry but I have no idea what that means and how it could possibly relate to the question in hand. :slight_smile:

What would help us is if you can mock up some images of what you want as I could keep guessing all day and still not get it right.

Or supply the code you are using in a working example and tell us what’s wrong with it.

I am on holiday until next week anyway but someone else will soon jump in and help:)
(I see Ron already replied :))

Hi,

I’ve put this together to try to explain better:

That pretty much seems to be what my examples above are already doing ( or close enough).

You’d just need to add a media query for small screen to make it one column when required.

I’m sure Ron can help with some code if you don’t know how to do that.

Thanks for the image, BUT… What you are showing was my take-away (and apparently Paul’s, too) from your verbal description. The Questions that I asked pertained to dimensions and aspect ratio, which you have still not addressed at all. The width labels “desktop”, “tablet” and “mobile” do not convey the range of widths that you are using. Sure, we can probably come close, but you can certainly be specific, too.

About the image: what are its native dimensions and what does it look like? Specifically, should it’s aspect ratio (shape) be respected like a portrait or identifiable structure OR is the aspect ratio not important such as a random pattern might be which could be stretched in any direction and still look “normal” to a visitor? In case the aspect ratio should be respected, can the top and bottom ends or left and right edges be cropped out of the picture as the width of the viewport changes?

Do you see that your “drawing” shows the size and shape of the image changing from square to horizontal. I would like to know how much it can be allowed to change, if it can at all. I noticed that your “image” shows the text in the middle of the rectangle (space above and below it) on the Tablet and mobile views. That is why I keep asking about the aspect ratio of the image and how much can be cropped?

What is the actual width of the desktop web page? I trust that you remember that the width of a browser window is not tied to the width of a montor screen.

How much text content is involved? Your drawing shows the size of the text becoming smaller at tabet and mobile widths. Is that to be the case? If so, it needs to be so stated in your requirements so the desktop text size is larger than the default and therefore can be reduced in smaller devices and by how much.

What kind of guidelines or code base or framework are you using that defines the breakpoints? Can the breakpoints change or are they written into the framework and inconvenient to change?

Can you post a link to your test web site so we can evaluate what you are doing? Can you attach the image to your next post?

Paul has already offered two very impressive guesses that don’t quite meet your (undefined) expectations. I’ll be glad to help you finish this issue, but I want more usable information with which to do it.

If you are just daydreaming, say so, because what you are showing in your image of images still does not strike me as realistic.

Do this in your css and it will do exactly what you want it to do (in modern browsers)

.about-us-image{
  display: flex;
}
.about-us-image img{
  flex-grow: 1;
  object-fit: cover;
}

Unfortunately object-fit isn’t supported in IE11 and I don’t think it’s in Edge yet.

To get the same result in those browsers, you need to apply the image source as a background image using js, set the actual image to opacity: 0; and apply background-size: cover; on the parent element.

.about-us-image{
  display: flex;
  background-size: cover;
}
.about-us-image img{
  flex-grow: 1;
  object-fit: cover;
  opacity: 0;
}
@supports (object-fit: cover) {
  .about-us-image img{
    opacity: 1;
  }
}

Hi,

I’ve used PaulOB’s code which I’ve got working fine on desktop and landscape tablet. But, I can’t work out how to have the image on top of the text on tablet portrait view and mobile.

This is the code:
CSS:



.match-height {
	display:flex;
	justify-content:space-between;
}
.about-us-img {
	flex: 0 0 50%;
	padding:10px;
	padding:0;
	position:relative;
	overflow:hidden;
	background:url(../../assets/img/about-isonmedia-2.jpg) no-repeat 50% 50%;
	background-size:cover;
}

.content-secondary{
  flex: 0 0 50%;
background: url("../../assets/img/secondary-background.jpg") repeat $brand-secondary;
    color: #fff;
    padding: 40px;
}





@media only screen and (max-width: 1200px) {


.match-height {
	display:flex;
	justify-content:space-between;
}
.about-us-img {
	flex: 0 0 100%;
	padding:10px;
	padding:0;
	position:relative;
	overflow:hidden;
	background:url(../../assets/img/about-isonmedia-2.jpg) no-repeat 50% 50%;
	background-size:cover;
}

.content-secondary{
  flex: 0 0 100%;
background: url("../../assets/img/secondary-background.jpg") repeat $brand-secondary;
    color: #fff;
    padding: 40px;
}


}

I’ve tried adding the width of the image and text divs to 100%, but its not working.

HTML:

<div class="match-height">
  <div class="about-us-img"></div>

 <div class="content-secondary clearfix">
text
</div>

</div>

the image is appearing 100%, but its still next to the text div instead of above it with the text under it.

You only needed to set match-height to display block for the smaller screen media query.

If you leave it as flex then you need to add flex-wrap:wrap to the same rule as the default is no- wrap.

On a phone at the moment so can’t debug properly :slight_smile:

hmm im not sure if i can be any help if ur trying to show it as what i see in the pic i use it like so:

CSS

*{
	padding:0px;
	margin:0px;
	font-size:0px;
	box-sizing:border-box;
	text-decoration:none;
	font-weight:normal;
	font-family:Tahoma;
	list-style:none;
	border:black solid 0px;
	
}
body{
	background-color:white;
	width:100%;
	height:100%;
	display:block;
}
li{
	font-size:14px;
	padding:5px;
}
#main-div{
	width:100%;
	text-align:center;
}
#content-div{
	background-color:blue;
	width:50%;
	height:300px;
	min-width:200px;
	display:inline-block;
	float:left;
}

@media (max-width:420px){
#content-div{
	width:100%;
}}

HTML

<div id="main-div">
<div id="content-div" style="background-color:red">
<img src="cpu.jpg" alt="" style="width:100%;height:300px;" />
</div>
<div id="content-div" style="padding-top:5%;">
<p>Who thought this would work</p>

<ul>
<li>Lets just make this div full</li>
<li>Lets just make this div full</li>
<li>Lets just make this div full</li>
<li>Lets just make this div full</li>
<li>Lets just make this div full</li>
<li>Lets just make this div full</li>
<li>Lets just make this div full</li>
</ul>
</div>

aslong as main div doesnt have fixed height the content furthest to the left will shift down when min-width hits;

the text align is to maintain the content after max width is reached it wil lay to the left if text align is applied than it will remain in the center

if you browsers like IE8 the @media and max/min-width doesnt work there