How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?
Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.
转载于:https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Also, height: auto; if you want to specify a width only.
Example: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div></div>
Currently there is no way to do this correctly in a deterministic way, with fixed-size images such as JPEGs or PNG files.
To resize an image proportionally, you have to set either the height or width to "100%", but not both. If you set both to "100%", your image will be stretched.
Choosing whether to do height or width depends on your image and container dimensions:
height="100%" on the image.width="100%" on the image.If your image is an SVG, which is a variable-sized vector image format, you can have the expansion to fit the container happen automatically.
You just have to ensure that the SVG file has none of these properties set in the <svg> tag:
height
width
viewbox
Most vector drawing programs out there will set these properties when exporting an SVG file, so you will have to manually edit your file every time you export, or write a script to do it.
I centered and scaled proportionally an image inside a hyperlink both horizontally and vertically this way:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
Tested in IE, Firefox, Safari.
More info about centering is here.
Here is a solution that will both vertically and horizontally align your img within a div without any stretching even if the image supplied is too small or too big to fit in the div. The html:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
The CSS:
#myDiv
{
height:104px;
width:140px;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
The JQuery:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
I hope this helps you guys out
You can set the image as the background to a div, then use the css background-size property
background-size: cover;
and it will "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area" -w3schools.com
Give the height and width you need for your image to the div that contains the < img> tag. don't forget to give the height/width in proper style tag. In the < img> tag, give the max-height and max-width as 100%.
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
you can add the details in appropriate classes after you got it right.
The code below is adapted from above and tested by me using an image called storm.jpg This is the complete HTML code for a simple page that displays the image. This works perfect and was tested by me with www.resizemybrowser.com. Put the CSS code at the top of your HTML code, underneath your head section. Put the the picture code wherever you want the picture.
<html>
<head>
<style type="text/css">
#myDiv
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
Check out my solution: http://codepen.io/petethepig/pen/dvFsA
It's written in pure CSS, without any JS code. It can handle images of any size and any orientation.
Given such HTML:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
CSS code would be:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
Define div simply
div.headerimg1 {
position: absolute;
top: 290px;
left: 81px;
width: 389px;
height: 349px;
}
<div class="headerimg1">
<img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;
display:inline;"></div>
I just published a jQuery plugin that do exactly what you need with a lot of options :
https://github.com/GestiXi/image-scale
Usage:
HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
JS
$(function() {
$("img.scale").imageScale();
});
Make it simple!
Give the container a fixed height and then for the img tag inside it set width and max-height.
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
Difference is that you set the width to be 100% not the max-width.
The solution is easy with a bit of maths...
Just put the image in a div and then in the html file where you specify the image set the width and height values in percentages using the pixel values of the image to calculate the exact ratio of width to height.
For example, say you have an image that has a width of 200 pixels and a height of 160 pixels. You can safely say that the width value will be 100% because it is the larger value. To then calculate the height value you simply divide the height by the width which gives the percentage value of 80%. In the code it will look something like this...
The accepted answer from Thorn007 doesn't work when the image is too small.
To solve this, I added a scale factor. This way, it makes the image bigger and it fills the div container.
Example :
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
notes:
1/ for webkit you must add -webkit-transform:scale(4); -webkit-transform-origin:left top; in the style.
2/ with a scale factor of 4, you have max-width = 400/4 = 100 and max-height = 200/4 = 50
3/ an alternate solution is to set max-width and max-height at 25%, it's even simpler
<style type="text/css">
#container{
text-align:center;
width: 100%;
height: 200px; /*set height*/
margin: 0px;
padding: 0px;
background-image:url('../assets/images/img.jpg');
background-size: content; /*scaling down large image to a div*/
background-repeat:no-repeat;
background-position:center;
}
</style>
<div id="container>
<!--inside container-->
</div>
This solution doesn't stretch the image and fills the whole container, but it cuts some of the image.
html
<div><img src="/images/image.png"></div>
CSS
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
A simple solution ( 4-step fix !!) that seem to work for me , is below. Hope it helps.The example uses the width to determine the overall size, but you can also flip it to use the height instead.
for example
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
You have to tell the browser the height of where you are placing it.
.example {
height: 220px; //DEFINE HEIGHT
background:url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
Edit: Previous table based image positioning had issues in IE11 (max-height doesn't work in display:table elements). I've replaced it with inline based positioning which not only works fine in both IE7 and IE11, but also requires less code.
Here is my take on the subject. It'll only work if the container has specified size (max-width and max-height don't seem to get along with containers that don't have concrete size), but I wrote the css in a way that allows it to be reused (add picture-frame class and px125 size class to your existing container).
In css:
.picture-frame
{
vertical-align:top;
display:inline-block;
text-align:center;
}
.picture-frame.px125
{
width:125px;
height:125px;
line-height:125px;
}
.picture-frame img
{
margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */
max-width:100%;
max-height:100%;
display:inline-block;
vertical-align: middle;
border:0; /* Remove border on imgs enclosed in anchors in IE */
}
And in html:
<a href="#" class="picture-frame px125">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
/* Main style */
.picture-frame
{
vertical-align:top;
display:inline-block;
text-align:center;
}
.picture-frame.px32
{
width:32px;
height:32px;
line-height:32px;
}
.picture-frame.px125
{
width:125px;
height:125px;
line-height:125px;
}
.picture-frame img
{
margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */
max-width:100%;
max-height:100%;
display:inline-block;
vertical-align: middle;
border:0; /* Remove border on imgs enclosed in anchors in IE */
}
/* Extras */
.picture-frame
{
padding: 5px;
}
.frame
{
border:1px solid black;
}<p>32px</p>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>Edit: Possible further improvement using JS (upscaling images):
function fixImage(img)
{
var $this = $(img);
var parent = $this.closest('.picture-frame');
if ($this.width() == parent.width() || $this.height() == parent.height())
return;
if ($this.width() > $this.height())
$this.css('width', parent.width() + 'px');
else
$this.css('height', parent.height() + 'px');
}
$('.picture-frame img:visible').each(function
{
if (this.complete)
fixImage(this);
else
this.onload = function(){ fixImage(this) };
});
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
turns out there's another way to do this.
<img style='height: 100%; width: 100%; object-fit: contain'/>
will do the work. It's CSS3 stuff.
Fiddle: http://jsfiddle.net/mbHB4/7364/
I have much better solution without need of any JS. It is fully responsive and I use it a lot. You often need to fit image of any aspect ratio to container element with specified aspect ratio. And having whole this thing fully responsive is a must.
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0,0,0,.15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="//placehold.it/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>You can set max-width and max height independently, image will respect the smallest one (depending on the values and aspect ratio of the image). You can also set image to be aligned as you want (eg. for product picture on infinite white background you can position it to center bottom easily)
</div>
check my ans https://stackoverflow.com/a/36712112/2439715
img{
width: 100%;
max-width: 800px;
}
As answered here, you can also use vh units instead of max-height: 100% if it doesn't work on your browser (like Chrome):
img {
max-height: 75vh;
}
Simplest way to do this is
by using object-fit
<div class="container">
<img src="path/to/image.jpg">
</div>
.container{
height: 300px;
}
.container img{
height:100%;
width:100%;
object-fit: cover;
}
If your using bootstrap just add the img-responsive class and changed to
.container img{
object-fit: cover;
}
All the provided answers, including the accepted one, work only under the assumption that the div wrapper is of a fixed size. So this is how to do it whatever the size of the div wrapper is and this is very useful if you develop a responsive page:
Write these declarations inside your DIV selector:
width : 8.33% /* or whatever percentage you want your div to take*/
max-height : anyValueYouWant /*(in px or %)*/
Then put these declarations inside your IMG selector:
width : "100%" /* obligatory */
max-height : anyValueYouWant /*(in px or %)*/
VERY IMPORTANT:
The value of maxHeight must be the same for both the DIV and IMG selectors.
A beautiful hack.
You have two ways of making the image responsive.
- When an image is a background image.
#container{
width: 300px;
height: 300px;
background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div id="container"><div>
Run it here
img tag to put images as it is better than background-image in terms of SEO as you can write keyword in the alt of the img tag. So here is you can make the image responsive.
- When image is in
imgtag.
#container{
max-width: 400px;
overflow: hidden;
}
img{
width: 100%;
object-fit: contain;
}
<div id="container">
<img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>
Run it here
Or you can simply use:
background-position:center;
background-size:cover;
Now the image will take all the space of the div.
The following works perfectly for me:
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
A simple solution is to use flex-box. Define the container's CSS to:
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/*any custom height*/
}
Adjust the contained image width to 100% and you should get a nice centered image in the container with the dimensions preserved. Cheers.