Resize an image to stay within the viewport - javascript

How can I make an image resize and maintain aspect ratio to stay within the container if the image is larger than the container, but not resize if the image is smaller than the container.
If the width of the image is larger than the width of the container then the following code should apply.
img {
width: 100%;
height: auto;
}
If the width of the image is smaller than the width of the container then the following code should apply.
img {
width: auto;
height: 100%;
}
I tried using the following code, but some strange things happen when the image width is larger then the container's width.
img_w = parseInt($("#img").css("width"));
screen_w = parseInt($(window).width());
img_w = parseInt($("#img").css("width"));
screen_w = parseInt($(window).width());
if (img_w > screen_w) {
$("#img").css("width", screen_w + "px"); // like 100%;
$("#img").css("height", "auto");
} else {
$("#img").css("width", "auto");
$("#img").css("height", "100%");
}

Problem solved with the following CSS:
img {
max-width:100%;
max-height:100%;
width: auto;
height: auto;
}

I tried your code and you can see here the result: http://jsfiddle.net/g6rL3L5h/
I think it's now ok and working.
I just delete 'html' in your css.
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
do you needed this?

Related

Make an image with a percentage width a perfect square using css

Hello I have an image in a container that is set to width: 100%.
I was wondering if there's any way to can have a height generated to make it a perfect square.
So say the original image is 450px wide and 300px tall.
The css gives it a width of 100% so it stretches and fills the container, but the image remains rectangular.
Is it possible to do some css or jquery trick to generate a height to make this image a perfect suqare?
I don't care if the image gets cropped or stretched out and looks funky, I just need it to be a perfect square.
Thanks!
So you are free to stretching out the image - this can be a CSS solution:
Make a square container based on the width by using padding-top: 100%
Position the image absolutely by stretching it out to the square container as desired.
See demo below:
.wrapper {
border: 1px solid red;
height: 0;
overflow: hidden;
padding-top: 100%;
box-sizing: border-box;
position: relative;
}
.wrapper img {
width: 100%;
vertical-align: top;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/400x300" />
</div>
Using straight CSS you can set width and height to 100vw.
You could do so with the following jQuery
var img_width = $('#image').width();
$('#image').css({'height':img_width+'px'});
Hope that helps.
Since you don't care if the image is cropped or distorted, the layout is simple.
Just add overflow: hidden to the container. The image can be any size.
div {
height: 100px;
width: 100px;
border: 2px solid red;
overflow: hidden;
}
<div>
<img src="http://www.placekitten.com/450/300">
</div>

Resizing image to perfectly fit a div with variable dimensions

I need to scale an image inside a div properly, so that the image keeps its proportions and so that either the width is equal to 100% or the height is equal to 100%.
So basically that the image takes up as much space as possible in the div whilst maintaining aspect ratio. And lets keep in mind that the div can change width and height.
So I have the intuition for this, but I don't have the code ...
The idea would be to get the ratio (height/width) of the div with
JavaScript/jQuery. => ratio A Then get ratio (height/width) of the image. => ratio B
Note: If ratio > 1, then we have a portrait image or div.
And if ratio < 1, then we have a landscape image or div.
If ratio A < ratio B, then we want height of image to be set at 100%;
If ratio A > ratio B, then we want width of image to be set at 100%;
So if we have a responsive div, width or height = 100% will change dynamically.
Is this possible?
Here are 2(css) solutions :
http://codepen.io/cryptcslaughtr/pen/LNoMBY
.container {
width: 100px;
height: 200px;
border: 1px solid #333;
background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
<div class="container"></div>
http://codepen.io/cryptcslaughtr/pen/qZGLvE
.container {
width: 250px;
height: 130px;
border: 1px solid #333;
}
.container img {
max-width: 100%;
max-height: 100%;
}
<div class="container">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" />
</div>
You can simply set parent div to position relative, and overflow hidden. And then do this:
.bg-img {
bottom: -1000px;
left: -1000px;
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
right: -1000px;
top: -1000px;
}
This will insure no matter whats the size of the container it will always cover it 100%. This will also contain image proportions.
If you need img tag for SEO/alt/ARIA/whatever, here is modified Cryptc_Slaughtr's solutions combined into one:
.container {
width: 250px;
height: 200px;
border: 1px solid #333;
background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
.container img {
width:100%;
height: 100%;
opacity:0;
}
<div class="container"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" title="Put your image" /></div>

HTML CSS JS onload change image size bad scale

I need scale image smooth, variable is image height, width is auto scaling by height size with css width: auto
css and HTML:
footer {
position: fixed;
bottom: 0;
height: 100%; /* if i change size here example: 300px get good scale */
margin-top: 15px;
}
footer img[usemap] {
border: none;
width: auto;
max-height: 100%;
height: 100%;
}
<footer>
<img src='https://burritojustice.files.wordpress.com/2011/02/img_3769.jpg' usemap="#Map" name="#Map" id="map">
</footer>
javascript:
$('footer').css('height', '300px'); //if i change size here get bad scale
/* at the result i need write with javascript how much height it's my image and get nice scale */
If i change css line: height: 100% to height: 300px it's works good width change together height by scale, but if i try to change value with javascript like this: $('footer').css('height', '300px'); it's works bad, also get 300px height but width remains the same not scaling.
https://jsfiddle.net/bddgo26o/1/
Check the v3 of the fiddle:
https://jsfiddle.net/bddgo26o/3/
Is that what you need?
footer {
position: fixed;
bottom: 0;
height: 20%; /* if i change size here example: 300px get good scale */
width:100%;
margin-top: 15px;
overflow: hidden;
border: 1px solid black;
}
footer img[usemap] {
border: none;
max-height: 100%;
min-height:100%;
}
$('footer').css('height', '50%'); //now changing gets ok
If I understand correctly, you wand to resize the height of the footer, and get the image resizing with the same proportions ?
If this is what you need, I have a solution in this JSFiddle
Basically, You are resizing the footer, so the image is resizing it height. But the original image size never change, so does the width.
I added this code to change the image height (to make it the same as the footer) :
$('footer img[usemap]').height($("footer").height());

Scale and center image in variable-size div using JS

http://jsfiddle.net/3qMnM/1/
HTML:
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400">
</div>
CSS:
.image {
height: 100%;
width: auto;
margin-right: 200px;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
I'm trying to scale images down (never up) dynamically to fit into the image-div (without cropping), which is variable in height (100%) and width (set to auto). The image also needs to be centered (vertically and horizontally) and have equal padding of a few pixels top and bottom.
There is an info panel next to the image container as you can see in the fiddle, but I'm not sure if this is relevant.
Do my statements make sense?
Thanks, I have spent way too much time experimenting with this already! :/
If I understand correctly, you want something like this.
It scales down if the image is too large, but keeps the original size when it fits inside the window. In other words, it never scales up - only down.
It is a combination of CSS and some jQuery:
This short JS centers the image vertically:
function verticallyCenterImage(){
var $img = $('.image img'),
windowHeight = $(window).outerHeight();
if($img.height() < windowHeight){
var delta = windowHeight - $img.height();
$img.css('margin-top', (delta / 2) + 'px');
}else{
$img.attr('style', '');
}
}
And this line of CSS keeps the image centered horizontally:
.image {
padding-right: 200px;
text-align: center; /* <- this one */
max-height: 100%;
overflow: hidden;
}
And to keep the original size of the image, I just set the max height and width on the img inside the .image class, like so:
.image img {
max-width: 96%;
max-height: 96%;
margin: 2%;
}
You can adjust the size and margins to your needs, just remember to keep them in relation too each other :)
Some of the techniques discussed here could work for you:
http://css-tricks.com/centering-in-the-unknown/
The trick there is to use table elements, or CSS 2.1 table display.
Edit: More approaches here: http://www.vanseodesign.com/css/vertical-centering/
You are mixing px with %. If you want to achieve that only by CSS, you need to use % for both widths:
.image {
width: 85%;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 15%;
height: 100%;
background-color: red;
right: 0px;
}
... otherwise, you have to use JS to calculate the current available width on the left side and assing it the .image div:
HTML
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400" />
</div>
CSS
.image {
min-height: 600px;
width: auto;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
JS (jQuery)
$(document).ready(function() {
$('.image')
.css('min-height', 'auto')
.height($(window).height())
.width($(window).width() - $('.info-panel').width())
;
});

CSS scale and square center crop image

So I have a collection of thumbnails in my app, which is the size of 200x200. Sometimes the original image doesn't have this ratio so I am planning to crop this image to a square.
Currently it just streches the image to fit into the thumbnail, so say my original image size is 400x800, then the image looks very squished. I wanted to crop this image so it looks at the shortest width/height and then crop it to a square, so in my example above it will be cropped to a 400x400.
Is there a way to easily do this via CSS or do I have to use some sort of JS to do this?
You can do this easily in CSS if you use background-image.
.thumb {
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
border: 3px solid #c99;
background-position: center center;
background-size: cover;
}
In this fiddle, first image is 400x800, second image is 800x400:
http://jsfiddle.net/samliew/tx7sf
Updated to handle cases where image width is greater than height.
You can do this with pure CSS. Set the container element of each image to have fixed height and width and overflow: hidden. Then set the image within to have min-width: 100%, min-height: 100%. Any extra height or width will overflow the container and be hidden.
HTML
<div class="thumb">
<img src="http://lorempixel.com/400/800" alt="" />
</div>
CSS
.thumb {
display: block;
overflow: hidden;
height: 200px;
width: 200px;
}
.thumb img {
display: block; /* Otherwise it keeps some space around baseline */
min-width: 100%; /* Scale up to fill container width */
min-height: 100%; /* Scale up to fill container height */
-ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}
Have a look at http://jsfiddle.net/thefrontender/XZP9U/5/
I came up with my own solution and thought I would share it here in case anyone else found this thread. The background-size: cover solution is the easiest, but I needed something that would work in IE7 as well. Here's what I came up with using jQuery and CSS.
Note: My images were "profile" images and needed to be cropped to squares. Hence some of the function names.
jQuery:
cropProfileImage = function(pic){
var h = $(pic).height(),
w = $(pic).width();
if($(pic).parent('.profile-image-wrap').length === 0){
// wrap the image in a "cropping" div
$(pic).wrap('<div class="profile-image-wrap"></div>');
}
if(h > w ){
// pic is portrait
$(pic).addClass('portrait');
var m = -(((h/w) * 100)-100)/2; //math the negative margin
$(pic).css('margin-top', m + '%');
}else if(w > h){
// pic is landscape
$(pic).addClass('landscape');
var m = -(((w/h) * 100)-100)/2; //math the negative margin
$(pic).css('margin-left', m + '%');
}else {
// pic is square
$(pic).addClass('square');
}
}
// Call the function for the images you want to crop
cropProfileImage('img.profile-image');
CSS
.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */
.profile-image-wrap {
/* whatever the dimensions you want the "cropped" image to be */
height: 8em;
width: 8em;
overflow: hidden;
}
.profile-image-wrap img.square {
visibility: visible;
width: 100%;
}
.profile-image-wrap img.portrait {
visibility: visible;
width: 100%;
height: auto;
}
.profile-image-wrap img.landscape {
visibility: visible;
height: 100%;
width: auto;
}

Categories