We Keep Coding

Display image in full browser window but only scale down if image is too large

I want to display an image centered within the entire browser window. There are a few conditions though. If the image size fits within the browser's client area, display it at its original size. If the image is taller or wider than the browser client window, then scale the image down. Finally, if the user resizes the browser, the image will either scale down (if too large) or scale no larger than its original size if the browser window exceeds the image size.
I can do all this with jQuery but am wondering if it can be done using css alone?
EDIT:
The closest I've got is this:
https://jsfiddle.net/Deepview/o5vgo6du/
html
<div class="outerCont"> <img src="http://www.wonderslist.com/wp-content/uploads/2015/10/Doutzen-Kroes-Most-Beautiful-Dutch-Woman.jpg" /> </div>
css:
.outerCont {
position: relative;
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
height: auto;
width: auto;
}
But the image doesn't center vertically.

Had to add the following to the outer div:
width: 100vw;
height: 100vh;
https://jsfiddle.net/Deepview/o5vgo6du/3/

Is that what you want to do? Just use background-size:cover and it will always fill the whole div.
*{
margin:0;
padding:0;
}
.image{
background:url('https://www.aussiespecialist.com/content/asp/en_gb/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg') no-repeat;
background-size:cover;
width:100vw;
height:100vh;
}
<div class="image"></div>

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>

Calculate apsect ratio width based on height

I have an inline img that is 1280(w) x 1024(h) and is contained within a div. The divs dimensions are set 100%(w/h) of the viewport with overflow hidden.
I want to use the image as a fullscreen background and require that it fills the viewport completely regardless of dimensions with no borders showing. It must keep its aspect ratio and I would also like the image to be centered at all times. I am aware that to achieve this some of the image will be cropped.
I believe if make the image height match the viewport height and calculate the width based on the images aspect ratio this will work but I am unsure how to do this. Can anyone help?
Many thanks in advance.

Use backstretch http://srobbin.com/jquery-plugins/backstretch/
$("#demo").backstretch("http://urltoimage.jpg");'
set #demo to 100/100% width and height

If you're not 100% glued to using an img tag, you can do the following:
HTML
<div id="background"></div>
CSS
#background {
background: url('path/to/img.jpg');
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}

Not really an answer to your question but a potential alternative -- have you tried the min-height/min-width CSS properties?
HTML:
<div class="container">
<div class="image-wrapper">
<img src="..." />
</div>
</div>
CSS:
.container {
width: 100vw;
height: 100vh;
background-color: grey;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
Fiddle: https://jsfiddle.net/mkjoyep1/
In the example, .container (your full width/height div), fills the page width vw/wh and the .image-wrapper has its width/height set to 100% which will match the parent's width and height. With overflow: hidden acting as the crop mechanism you can then stretch your image to fill it's container. I've positioned the image in the center with the method explored here.
This appears to work for me on Chrome and Firefox.
*Edited to include html/css

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;
}

keep html contents at same position and size ratio in full screen mode

I have being researching regarding this question for a long time but I was not lucky. Here is the situation. Assume you have a blue rectangle in the center of the page. When you go full screen, we can use percentage for height and width to preserve the ratio of rectangle. However, the position of rectangle changes and it moves up and you end up with extra space at the bottom of the page.
So what should I do to keep rectangle in the center of the page (equal vertical and horizontal distance) when full screen mode is enabled? In other words, if your screen is 1280x800, center of rectangle be at (640,400)
If you check home page of Chrome browser, when you go full screen, the position of apps stay the same and you don't end up with extra space at the bottom. Appreciate your help

Define width of the rectangle and use margin: 0 auto; to center it in page horizontally.
If you want to center a div horizontally and vertically, use something like this
HTML
<div id="rectangle"></div>
CSS
#rectangle {
width: 30%; //can set any value here
height: 20%; //can set any value here
position: absolute;
left: 50%;
top: 50%;
margin-left: -15%; //negative half of width
margin-top: -10%; //negative half of height
background-color: red;
}​
See the fiddle here.
OR
HTML
<div id="wrapper">
<div id="container">
<div id="rectangle"></div>
</div>
</div>​
CSS
body, html {
height: 100%;
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
}
#wrapper[id] {
display: table;
position: static;
}
#container[id] {
display: table-cell;
vertical-align: middle;
width: 100%;
}
#rectangle {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
​
See the fiddle here.

Have you tried also using percentages for the margins, for example if you centre square was 60% tall and wide you could add the 20% as a margin so that would also scale up. Without trying I don't know if it would give you the desired effect but it should fix the issue of the square moving up.

oops,
I forget that I am working on an iMac.
the if addition in the script solved my problem.
function vertical_center()
{
var ww = $(window).width();
if (ww < 1600)
{
$("#character").css({'width': ww + 'px','height': (ww/4) + 'px', 'margin-top': -(ww/8) + 'px'});
}
else
$("#character").css({'width': ww + 'px'})
}
Yet, I would be glad if someone looks over my code telling me where some silly things remain.
Hope this post added something nevertheless, thank you guys