Contain an image within a div?

I want to contain an image into a 250 x 250 div, forcing the image to resize but not stretch. How can I do this? By the way, the image will usually be bigger than the div itself, which is why resizing comes into the picture.

<div id = "container"> <img src = "whatever" /> </div> #container { width:250px; height:250px; border:1px solid #000; }

Here's a jsfiddle which someone can edit:

http://jsfiddle.net/rV77g/

-------------Problems Reply------------

Use max width and max height. It will keep the aspect ratio

#container img
{
max-width: 250px;
max-height: 250px;
}

http://jsfiddle.net/rV77g/

You have to style the image like this

#container img{width:100%;}

and the container with hidden overflow:

#container{width:250px; height:250px; overflow:hidden; border:1px solid #000;}

Since you don't want stretching (all of the other answers ignore that) you can simply set max-width and max-height like in my jsFiddle edit.

#container img {
max-height: 250px;
max-width: 250px;
}

See my example with an image that isn't a square, it doesn't stretch

Here is javascript I wrote to do just this.

function ImageTile(parentdiv, imagediv) {
imagediv.style.position = 'absolute';

function load(image) {
//
// Reset to auto so that when the load happens it resizes to fit our image and that
// way we can tell what size our image is. If we don't do that then it uses the last used
// values to auto-size our image and we don't know what the actual size of the image is.
//
imagediv.style.height = "auto";
imagediv.style.width = "auto";
imagediv.style.top = 0;
imagediv.style.left = 0;

imagediv.src = image;
}

//bind load event (need to wait for it to finish loading the image)
imagediv.onload = function() {
var vpWidth = parentdiv.clientWidth;
var vpHeight = parentdiv.clientHeight;
var imgWidth = this.clientWidth;
var imgHeight = this.clientHeight;

if (imgHeight > imgWidth) {
this.style.height = vpHeight + 'px';
var width = ((imgWidth/imgHeight) * vpHeight);
this.style.width = width + 'px';
this.style.left = ((vpWidth - width)/2) + 'px';
} else {
this.style.width = vpWidth + 'px';
var height = ((imgHeight/imgWidth) * vpWidth);
this.style.height = height + 'px';
this.style.top = ((vpHeight - height)/2) + 'px';
}
};

return {
"load": load
};

}

And to use it just do something like this:

var tile1 = ImageTile(document.documentElement, document.getElementById("tile1"));
tile1.load(url);

I use this for a slideshow in which I have two of these "tiles" and I fade one out and the other in. The loading is done on the "tile" that is not visible to avoid the jarring visual affect of the resetting of the style back to "auto".

I've just come across object-fit, which behaves like background-size (and solves the issue of scaling images up and down to fit).

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

There's a polyfill for it here: https://github.com/anselmh/object-fit

Contain an image within a div?

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

I've punched a a comparison of some methods into the SO snippet below (open and run.. it's lengthy, so I hid it by default):

document.addEventListener('DOMContentLoaded', function() {
objectFit.polyfill({
selector: '.cover',
fittype: 'cover'
});
objectFit.polyfill({
selector: '.contain',
fittype: 'contain'
});
});

.no-tricks,
.cover,
.contain,
.min-max-height,
.no-object-fit,
.no-cover {
width: 150px;
height: 150px;
overflow: hidden;
outline: 1px solid gray;
background-color: whitesmoke;
text-align: center;

}
.no-tricks img,
.cover img,
.contain img,
.min-max-height, img
.warp img,
.no-cover img {
outline: 1px solid black;
}

.cover img {
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.contain img {
width: 100%;
height: 100%;
object-fit: cotain;
overflow: hidden;
}

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

.min-max-height img {
max-height: 100%;
min-height: 100%;
}

.no-cover img {
width: 100%;
height: auto;
}

.raw {
outline: 1px solid magenta;
}

<code>object-fit: cover;</code>
<div class="cover">
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">
</div>

<hr>

<code>object-fit: contain;</code>
<div class="contain">
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">
</div>

<hr>

<code>no tricks (image is cropped, not at all resized)</code>
<div class="no-tricks">
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">
</div>

<hr>

<code>without object-fit</code>
<div class="no-object-fit">
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">
</div>

<hr>

<code>min-max-height (works if you know the src is landscape, crops from the left)</code>
<div class="min-max-height">
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">
</div>

<hr>

<code>height auto - doesn't cover</code>
<div class="no-cover">
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">
</div>

<hr>

<p>Raw image (note the aspect ratio):</p>
<img class="raw" src="http://upload.wikimedia.org/wikipedia/commons/6/6d/Circle_radius_w.svg">

<script src="https://raw.githubusercontent.com/anselmh/object-fit/master/dist/polyfill.object-fit.js">

#container img{
height:100%;
width:100%;
}

Category:css Views:0 Time:2012-01-30
Tags: image css

Related post

  • Setting a div's height in HTML with CSS 2008-08-07

    I am a CSS newbie trying to layout a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be s

  • Setting the height of a DIV dynamically 2008-08-28

    In a web application I'm working on, I have a page that contains a DIV that has an auto-width depending on the width of the browser window. However, I need to be able to have an auto-height for the object. The DIV starts about 300px from the top scre

  • How do you swap DIVs on mouseover? (jquery?) 2008-08-29

    This most be the second most simple rollover effect, still I don't find any simple solution. Wanted: I have a list of items and a correspoding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide sho

  • On a two-column page, how can I grow the left div to the same height of the right div using CSS or Javascript? 2008-08-30

    I'm trying to make a two-column page using a div-based layout (no tables please!). Problem is, I can't grow the left div to match the height of the right one. My right div typically has a lot of content. Here's a paired down example of my template to

  • CSS - Make divs align horizontally 2008-08-31

    I have a container div with a fixed width and height, with overflow: hidden. I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of t

  • Getting image to stretch a div 2008-09-03

    How can I get an image to stretch the height of a DIV class? Currently it looks like this: However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the image. Here is the CSS for the DIV (the grey box): .p

  • If you were programming a calendar in HTML would you use Table tags or Div tags? 2008-09-03

    I converted my company's calendar to XSL and changed all the tables to divs. It worked pretty well, but I had a lot of 8 day week bugs to work out initially owing to precarious cross-browser spacing issues . but I was reading another post regarding w

  • Getting DIV id based on x & y position 2008-09-08

    The problem I'm trying to solve is "What's at this position?" It's fairly trivial to get the x/y position (offset) of a DIV, but what about the reverse? How do I get the id of a DIV (or any element) given an x/y position? --------------Solutions-----

  • CSS - Placement of a div in the lower left-hand corner 2008-09-08

    I wish I were a CSS smarty .... How can you place a div container in the lower left-hand corner of the web page; taking into account the users scroll-position? Thanks in advance for any assistance. --------------Solutions------------- The attributes.

  • How do I add a div and pick it up later 2008-09-09

    I think this is specific to IE 6.0 but... In JavaScript I add a div to the dom...I assign an ID attribute. When I later try to pick up the Div by the ID all I get is null??? Any suggestions? Example: var newDiv = document.createElement("DIV"); newDiv

  • How to vertically center content with variable height within a div? 2008-09-12

    What is the best way to vertically center the content of a div when the height of the content is variable. In my particular case, the height of the container div is fixed, but it would be great if there were a solution that would work in cases where

  • What is the best way to position a div in css? 2008-09-14

    I'm trying to place this menu: <div class="left-menu" style="left: 123px; top: 355px"> <ul> <li> Categories </li> <li> Weapons </li> <li> Armor </li> <li> Manuals </li> <li> Sustenance

  • DIV's vs. Tables or CSS vs. Being Stupid 2008-09-14

    I know that tables are for tabular data, but it's so tempting to use them for layout. I can handle DIV's to get a three column layout, but when you got 4 nested DIV's, it get tricky. Is there a tutorial/reference out there to persuade me to use DIV's

  • Figure out div that is visible out of four divs 2008-09-14

    I need to figure out what div is visible out of four possible divs using jQuery. Only one of those div's will be visible at any given time. This is what I have that works so far: $("#FeatureImage1:visible, #FeatureImage2:visible, #FeatureImage3:visib

  • JavaScript to scroll long page to DIV 2008-09-16

    I have a link on a long HTML page. When I click it, I wish a DIV on another part of the page to be visible in the window by scrolling into view. A bit like EnsureVisible in other languages. I've checked out scrollTop and scrollTo but they seem like r

  • How do I make an HTML table the same width as its containing div tag? 2008-09-16

    I have a table inside a div. I want the table to occupy the entire width of the div tag. In the CSS, I've set the width of the table to 100%. Unfortunately, when the div has some margin on it, the table ends up wider than the div it's in. I need to s

  • Problem accessing the content of a div when that content came from an Ajax call 2008-09-16

    Here's a very simple Prototype example. All it does is, on window load, an ajax call which sticks some html into a div. <html> <head> <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script> <script typ

  • Make a div fill the height of the remaining screen space 2008-09-18

    I am currently working on a web application, where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill th

  • Converting Table Layout To Div 2008-09-18

    I'm implementing a comment control that uses an ASP.Repeater to display each comment. The comment itself is currently displayed using a table to divide up some images to display the comment in a bubble. I know that tables are supposed to be the epito

  • DIVs vs. TABLEs a rebuttal please 2008-09-18

    There are lots of people out there asking "why shouldn't we use tables for structuring our HTML" and while a lot of answers come in, I rarely see anyone being converted to the world of semantics. That said, I've yet to see any convincing rebuttals to

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.134 (s). 11 q(s)