Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions

Developer
Anya Craig
Size
4,712 Kb
Views
54,648
  1. Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions Previews
  2. Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions HTML Codes
  3. Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions CSS Codes
  4. Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions JS Codes

How do I make an making an img fill a div while maintaining aspect ratio - three imperfect solutions?

It's really tough to get an image to fill a responsive div while maintaining the aspect ratio of the image. I know because I've tried and couldn't find a perfect solution! . What is a making an img fill a div while maintaining aspect ratio - three imperfect solutions? How do you make a making an img fill a div while maintaining aspect ratio - three imperfect solutions? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions Previews
IQ Test

Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Three Imperfect Solutions for Making Images Fill Containing Divs</h1>
<h3>(While Maintaining Their Aspect Ratios)</h3>
<p class="intro"><strong>Here's a challenge</strong>: Make sure that an image within a parent div always fills the whole div but NEVER changes its aspect ratio. The goal is the same effect as "background-size: cover", but for this challenge, we WON'T use background images - just regular "img" tags. It's pretty difficult, and I haven't been able to come up with a perfect solution. Here are three that I've tried, two using pure CSS and one using JavaScript. If you have a perfect solution, I'd love to know it!</p>
<p class="intro">By the way, several people have suggested simply setting the width on the img to 100% and the height to auto. Unfortunately, that leaves gaps around the images at some screen widths. I made a <a target="_blank" href="http://codepen.io/AnyaCraig/pen/wzJWbB">separate codepen</a> to illustrate why this method didn't make my top three.</p>
<p class="intro">In these examples, we're using a <strong>landscape-oriented image (left)</strong> and a <strong>portrait-oriented image (right)</strong>.</p>
<p><strong>Solution #1</strong>: We're not setting height or width here; images appear at their natural size and are always centred and full width and height, so they fully cover their containing divs and the aspect ratio is preserved. The only issue is that if the image you're using is naturally very large, you may get more of a close-up than you want! See how close up we're seeing the fishermen on the left and the net-mending man on the right? It would be nice to get a broader look at them, wouldn't it? I mean, we're basically just looking at a guy's crotch in the first image.</p>
<div class="wrapper wrapper_1 clearfix"> <div class="holder"> <img src="http://4.bp.blogspot.com/-FR-ONPQr788/VRGh5mz-BQI/AAAAAAACL7Y/j41zUFTx3tg/s1600/Old%2BPhotograph%2BFishermen%2BFair%2BIsle%2BScotland.JPG" alt="A black-and-white image of some 19th-century Scottish fisherman posed on a rocky shore" /> </div> <div class="holder"> <img src="http://3.bp.blogspot.com/-xKW55CldU_I/VVDHL6HSCnI/AAAAAAACOuQ/87VFqjaip9k/s1600/Old%2BPhotograph%2BElderly%2BFisherman%2BCrail%2BEast%2BNeuk%2BOf%2BFife%2BScotland.jpg" alt="A black-and-white image of a 19th century Scottish fisherman mending his nets" /> </div>
</div>
<p><strong>Solution #2</strong>: The image styles are altered by a JS function that tests whether they are portrait or landscape orientation and applies specific styles to each through a class name. Seems great, right? But it's not truly responsive! Try narrowing the window until each image is very tall and thin. You'll see the image on the right start to get pretty squished. That's because the div containing the image is still width: 100% and min-height:100%, so the image is being stretched up to fit the height, but the width is being constrained. We'd see the same sort of effect with the landscape image on the left if we narrowed the container vertically.</p>
<div class="wrapper wrapper_2 clearfix"> <div class="holder"> <img src="http://4.bp.blogspot.com/-FR-ONPQr788/VRGh5mz-BQI/AAAAAAACL7Y/j41zUFTx3tg/s1600/Old%2BPhotograph%2BFishermen%2BFair%2BIsle%2BScotland.JPG" alt="A black-and white image of some 19th-century Scottish fisherman posed on a rocky shore" /> </div> <div class="holder"> <img src="http://3.bp.blogspot.com/-xKW55CldU_I/VVDHL6HSCnI/AAAAAAACOuQ/87VFqjaip9k/s1600/Old%2BPhotograph%2BElderly%2BFisherman%2BCrail%2BEast%2BNeuk%2BOf%2BFife%2BScotland.jpg" alt="A black-and-white image of a 19th century Scottish fisherman mending his nets" /> </div>
</div>
<p><strong>Solution #3</strong>: Here, we're applying the CSS property "<a target="_blank" href="https://css-tricks.com/almanac/properties/o/object-fit/">object-fit</a>" to the images, with a value of "cover". Looks pretty good! You can even try narrowing the window to see if it squishes. It doesn't! It's the perfect solution, right? Not quite! It's <a target="_blank" href="http://caniuse.com/#search=object-fit">supported in every browser but Internet Explorer and Edge</a> (boo!), so it's not ideal. If only!</p>
<div class="wrapper wrapper_3 clearfix"> <div class="holder"> <img src="http://4.bp.blogspot.com/-FR-ONPQr788/VRGh5mz-BQI/AAAAAAACL7Y/j41zUFTx3tg/s1600/Old%2BPhotograph%2BFishermen%2BFair%2BIsle%2BScotland.JPG" alt="A black-and-white image of some 19th-century Scottish fisherman posed on a rocky shore" /> </div> <div class="holder"> <img src="http://3.bp.blogspot.com/-xKW55CldU_I/VVDHL6HSCnI/AAAAAAACOuQ/87VFqjaip9k/s1600/Old%2BPhotograph%2BElderly%2BFisherman%2BCrail%2BEast%2BNeuk%2BOf%2BFife%2BScotland.jpg" alt="A black-and-white image of a 19th century Scottish fisherman mending his nets" /> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions - Script Codes CSS Codes

/* BOX-SIZING: BORDER-BOX - apply a natural box layout model to all elements, but allowing components to change */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
/* CLEARFIX */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
/* === MAIN STYLES (DEFAULT/SOLUTION #1) === */
p { font-size: 18px;
}
p.intro { color: firebrick;
}
.wrapper { width: 60%; height: 300px; border: 5px solid black; margin: 0 auto 40px auto;
}
/* Here are some basic styles for the containing divs */
.holder { width: 50%; height: 100%; float: left; /* We can keep our images centred with these flex properties */ display: flex; justify-content: center; align-items: center; /* We're going to get some image overflow, so let's hide that! */ overflow: hidden;
}
/* Let's give the containing divs different-coloured borders so that we can see them */
.holder:first-child { border: 4px solid gold;
}
.holder:last-child { border: 4px solid tomato;
}
/* Let's put a min-height and a min-width of 100% on the images so that they're never shorter or thinner than their containers */
.holder img { display: block;/* to get rid of the phantom "descender gap" under the image */ min-height: 100%; min-width: 100%; flex-shrink: 0;/* to stop the image from shrinking */ /* We're not setting widths or heights on the images, so they'll appear at their natural size */
}
/* === SOLUTION #2-SPECIFIC STYLES === */
/* Here, we're making sure that the landscape-oriented image is always full-height, and as wide as it needs to be to maintain its aspect ratio. */
img.landscape { width: auto; height: 100%;
}
/* Here, we're making sure that the portrait-oriented image is always full-width, and as tall as it needs to be to maintain its aspect ratio */
img.portrait { height: auto; width: 100%;
}
/* === SOLUTION #3-SPECIFIC STYLES === */
/* Here's that magical property, object-fit */
.wrapper_3 .holder img { object-fit: cover; width: 100%;/* We'll set the width to 100% to make sure our images don't stay TOO big */
}

Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions - Script Codes JS Codes

// For each image in each holder in "wrapper_2", figure out whether it's wider than it is tall (landscape) or taller than it is wide (portrait). If landscape, apply a class of "landscape". If portrait, apply a class of "portrait" */ $('.wrapper_2 .holder').find('img').each(function(){ var imgClass = (this.width/this.height > 1) ? 'landscape' : 'portrait'; $(this).addClass(imgClass); });
// Adapted from http://jsfiddle.net/Mottie/RNVaZ/
Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions - Script Codes
Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 3
Size 4,712 Kb
Views 54,648
Do you need developer help for Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anya Craig (AnyaCraig) Script Codes
Name
Border-image for Frames
Responsive Square with Background Image
Paint by Number
Leaf animation with Snap.svg on scroll-by
Cupid in Pursuit
Drawing Tablet
Flex Baseline Test
Simple Responsive Gallery
Hover Effect Hodge-Podge
Fancy Two-Border Buttons
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!