I've been looking for an answer to this. I'd prefer a solution with just CSS, but I've been unable to find one.
I've got a popup of a fixed width, and it will grow in height if the contents are larger. Inside, I put an image which should take half of the popup while maintaining aspect ratio and being as large as possible without going off the screen, and a div to hold information about the image, which should also be half the screen, so that the image and div are side-by-side. Example here: https://codepen.io/Smarticles101/pen/WdmZLx
I can set a height on the image of 90vh to make it larger and a max-width of 50% to make sure it only takes half of the popup. However, if the window shrinks in width or if I make the fixed width of the popup smaller, the image will maintain height and max-width, thus not maintaining aspect ratio.
How can I make the image maintain aspect ratio while it shrinks in width?
Html:
<div id="popup">
<img src="https://images.freeimages.com/images/large-previews/12d/frangipani-02-1311438.jpg" alt="image" />
<div id="sidedata">
<h1>Image</h1>
<p>Some data about the image here</p>
</div>
</div>
<br />
<div id="popup">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" />
</div>
CSS:
#popup {
max-width: 50%;
background-color: blue;
}
img {
height: 90vh;
max-width: 50%;
/*
The image will not maintain aspect ratio if the max-width is reached, it will maintain height as whatever it was set to originally rather than shrink in height.
*/
display: inline-block;
}
#sidedata {
max-width: 50%;
display: inline-block;
}
short anwser, hope that will help, try with max-height :
img {
max-height: 90vh;
max-width: 50%;
display: inline-block;
}
I need the image to take the entire width of the container unless the resulting height is bigger then the available container's viewport height.
Basically I want the image to be responsive but also that it should still fit the screen. If it doesn't fit the screen it should be scaled down, horizontally centered, and preferably added with black tiles on its sides.
Currently, my CSS class looks like this:
.img-responsive{
display: block;
max-width: 100%;
min-width: 100%;
height: auto;
}
I've tried to play around with max-height on the image, or on a dedicated container, nothing seemed to do the trick by pure CSS.
Clarifications:
I don't know the images dimensions in advance so can't just put them in a container with a preset size.
Basically, my goal is for the images to be always fully visible on the screen (if you scroll to the image) and take up the largest possible surface.
Here's a more detailed example:
Let's say I have scrollable container with a lot of content. The container takes up the entire viewport width (let's say its 500px) and the available visible height of the container is the entire viewport height minus a navbar height (let's say 1000px).
I can't know in advance what's the container's visible dimensions as it can always change.
Inside the container there's whatever, text, images, etc.
Now, for a given image, here are possible scenarios:
If the image is 500x800, it should be presented as is, as it takes up the entire available width, and height is no bigger then the container's visible height.
If the image is 500x2000, it should be scaled down to 250x1000
and horizontally centered. This will take up the entire visible container's height, and keep the image's aspect ratio
If the image is 250x300, it should be scaled up to 500x600, taking up the entire available width
If the image is 200x500, it should be scaled up to 400x1000, taking up the entire available height
If the image is 1000x1000, it should be scaled down to 500x500, taking up the entire available width
Here's a JSFiddle explaining the problem
I would advise against using the IMG tag for this. Rather use a div tag and then use background image properties. Here is the code for this, set the container size to whatever you like:
<div id="container"></div>
<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;
</style>
background-size: contain is what is best for this. It scales the image to the largest the image can be within the div without making it larger than its native size. Hope this helps
EDIT:
Forgot to add that if you want it to be in the center of the container, so that when the image doesnt fit the full size of the container there is the white space around it, you use the css code background-position: center center;
Mostly what you need is to give img elements two properties {max-width:100%} and {height: auto}
If you open the snippet below in full screen and resize your window (Note: image sizes are randomly chosen)
you will see how nice they play. They adhere to the max width and they don't overstretch themselves in any direction.
I added some code in there just to make this easier to show
like making giving images {display:block} and {padding-bottom}
body {
background: #131418;
text-align: center;
color: white;
font-size: 25px;
}
body,
.image-container,
.image-container img,
.smalldiv {
max-width: 100%;
}
.image-container img {
height: auto;
display: block;
padding-bottom: 1em;
}
.smalldiv {
/*for demnostration only */
width: 600px;
background: darkblue;
}
.smalldiv,
.image-container img {
margin: 0 auto;
}
<h3>Images will always keep their aspect ratio and they will always adhere to the width of their parent containers.</h3>
<hr>
<div class="image-container">
<h4>This is what the image container looks like when it has the entire screen space</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
<div class="smalldiv">
<div class="image-container">
<h4>This is what the image containing div looks when it's put inside a container smaller then the screen width</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
</div>
evilgenious448 answer comes really close, just that it only works with background images. What I have is:
<html>
<head>
<style>
body {
margin: 0px;
}
.holder {
background-image: url('image1.JPG');
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="holder">
<div class="inner">
</div>
</div>
</body>
</html>
I do not know how to size the inner div equally to the image.
Here is an example with code and everything:
You can drag around the page to test.
--- When the viewport is higher / taller than the image, the image's width is the width of the viewport disregarding viewport height. On the other hand, when the viewport is wider than the image, the image uses the viewports height, disregarding its with.
#image {
background-image: url(https://media.cntraveller.com/photos/611bedcd231ed5e8dfa34573/16:9/w_2580,c_limit/sennen-cove-beach-britain-conde-nast-traveller-20april18-rex.jpg);
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
<body id="body">
<div id="image" />
</body>
You can use height: 100% of the parent container (in my case its img-holder). And apply text-align: center to the parent. Like:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
.img-holder img {
height: 100%;
}
Have al look at the snippet below:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
img {
height: 100%;
}
<div class="img-holder">
<img src="http://placehold.it/100x200" alt="">
</div>
Hope this helps!
The best and the easiest way is to use vh and vw properties. vh when set to 100 takes up the complete Viewport Height and same goes with vw for width. Further, max height property may be added to stop image from stretching beyond its original dimensions.
I load images dynamically into my webpage and make them responsive:
<div id="images"><img id="dynamic_img" src=""/></div>
css:
#images{
height: 80%;
width: 30%
}
img{
max-height: auto
max-width:100%
}
Problem now is, that the images have different heights and widths. Now this works when the width of an image is longer than its height but not the other way around. (in this case max-height would be 100% and max-width: auto
Is this possible to switch these two values according to the image loaded in CSS or do I need to use JS for that?
Thanks in advance
Here you have an example where images are fitted horizontal and vertically.
I used
img {
max-width: 100%;
max-height: 100%;
}
Here you are: https://jsfiddle.net/jormaechea/j219ucnc/1/
Update
The key to achieve this is to set
html, body {
height: 100%;
}
<div id="images"><img class="img" src="" alt="" /></div>
.img
{
width=100%;
}
your div should have width=100% for example.
don't use max-width
you can set the #images div also a with of 80% - it will be responsive and the image refits to the divs width
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}