So, I want to have an image resized to 30% of its original height/width. Pretend you don't know its height or width, how would you go about it using only CSS/HTML?
If you need a quick inline solution:
<img style="max-width: 100px; height: auto; " src="image.jpg" />
Update:
Using a display: inline-block; wrapper, it's possible to make this happen with CSS only.
HTML
<div class="holder">
<img src="your-image.jpg" />
</div>
CSS
.holder {
width: auto;
display: inline-block;
}
.holder img {
width: 30%; /* Will shrink image to 30% of its original width */
height: auto;
}
The wrapper collapses to the original width of the image, and then the width: 30% CSS rule on the images causes the image to shrink down to 30% of its parent's width (which was its original width).
Here's a demo in action.
Sadly no pure HTML/CSS way to do it as neither is geared to perform calculations like that. However, it's pretty simple with a snippet of jQuery:
$('img.toResizeClass').each(function(){
var $img = $(this),
imgWidth = $img.width(),
imgHeight = $img.height();
if(imgWidth > imgHeight){
$img.width(imgWidth * 0.3);
} else {
$img.height(imgHeight * 0.3);
}
});
<img style="max-width: 100%; height: auto; " src="image.jpg" />
i am using percent to max-width and very nice
Related
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 have an img object within a div object. I want to set the width of img (or div) and have its height set automatically to whatever is necessary to retain the original ratio of the image.
Suppose I set the width to 200px, which is shorter than the image's natural width. When I do this:
HTML
<div id="container">
<img id="foo" src="foo.png">
</div>
CSS
#foo{
width: 200px;
}
or
#container{
width: 200px;
}
the img has the height set to whatever is necessary to retain the original ratio, but the outer div has the height set to the inner image's natural height, and top and bottom margins are inserted between the inner img and the outer div.
I want the outer div's height to be whatever is necessary to retain the original ratio of img so that the top and bottom margin between div and img would become zero. How can I do that?
Try this code
DEMO
<div class="container">
<img src="demo.jpg" alt="" />
</div>
body{
margin: 0;
}
.container{
width: 200px;
border: 1px solid red; //tmp added to check the height of container
}
.container img{
display: block;
width: 100%;
}
Use this function:
<script type="text/javascript">
function resizeHeight(){
var resizedImage = document.getElementById('foo');
resizedImage.style.height = (resizedImage.style.height * 200)/resizedImage.style.width;
resizedImage.style.width = '200px';
}
</script>
And edit your image line to this:
<img id="foo" src="foo.png" onload="resizeHeight()">
It should set the picture's width to 200 automatically, and resize the height proportionally.
I am using an img tag of HTML to show a photo in our application. I have set both its height and width attribute to 64. I need to show any image resolution (e.g. 256x256, 1024x768, 500x400, 205x246, etc.) as 64x64. But by setting the height and width attributes of an img tag to 64, it's not maintaining the aspect ratio, so the image looks distorted.
For your reference my exact code is:
<img src="Runtime Path to photo" border="1" height="64" width="64">
Don't set height AND width. Use one or the other and the correct aspect ratio will be maintained.
.widthSet {
max-width: 64px;
}
.heightSet {
max-height: 64px;
}
<img src="https://placeimg.com/200/500/any/grayscale" />
<img src="https://placeimg.com/200/500/any/grayscale" width="64" />
<img src="https://placeimg.com/200/500/any/grayscale" height="64" />
<img src="https://placeimg.com/200/500/any/grayscale" class="widthSet" />
<img src="https://placeimg.com/200/500/any/grayscale" class="heightSet" />
Another option that gives you more flexibility is to use object-fit. This allows fixed dimensions to be set for the img whilst the image itself can be presented in a number of different ways within the defined area.
img {
width: 128px;
height: 128px;
border: 1px solid hotpink;
}
.none {
/* Image is not scaled */
object-fit: none;
}
.fill {
/* Image is scaled to fill the container. */
/* Aspect ratio IS NOT maintained */
object-fit: fill;
}
.cover {
/* Image is scaled to fill the container. */
/* Aspect ratio IS maintained */
object-fit: cover;
}
.contain {
/* Image is scaled to fit within the container. */
/* Aspect ratio IS maintained */
object-fit: contain;
}
.scale-down {
/* Uses either 'none' or 'contain' to produce the smallest image size */
object-fit: scale-down;
}
<img src="https://picsum.photos/seed/stackoverflow/200/300" class="none" />
<img src="https://picsum.photos/seed/stackoverflow/200/300" class="fill" />
<img src="https://picsum.photos/seed/stackoverflow/200/300" class="cover" />
<img src="https://picsum.photos/seed/stackoverflow/200/300" class="contain" />
<img src="https://picsum.photos/seed/stackoverflow/200/300" class="scale-down" />
here is the sample one
div{
width: 200px;
height:200px;
border:solid
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>
Set width and height of the images to auto, but limit both max-width and max-height:
img {
max-width:64px;
max-height:64px;
width:auto;
height:auto;
}
Fiddle
If you want to display images of arbitrary size in the 64x64px "frames", you can use inline-block wrappers and positioning for them, like in this fiddle.
<img src="Runtime Path to photo"
style="border: 1px solid #000; max-width:64px; max-height:64px;">
Use object-fit: contain in css of html element img.
ex:
img {
...
object-fit: contain
...
}
None of the methods listed scale the image to the largest possible size that fits in a box while retaining the desired aspect ratio.
This cannot be done with the IMG tag (at least not without a bit of JavaScript), but it can be done as follows:
<div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
There's a new CSS property aspect-ratio. It sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
img {
width: 100%;
aspect-ratio: 16/9;
}
It's supported in all well spread browsers.
MDN link: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
And https://web.dev/aspect-ratio/ contains good examples of using this property
Wrap the image in a div with dimensions 64x64 and set width: inherit to the image:
<div style="width: 64px; height: 64px;">
<img src="Runtime path" style="width: inherit" />
</div>
Try this:
<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">
Adding object-fit="cover" will force the image to take up the space without losing the aspect ratio.
You can set aspect ratio
img {
width: 64px;
aspect-ratio: 1/1;
}
<img src="Runtime Path to photo" border="1">
Why don't you use a separate CSS file to maintain the height and the width of the image you want to display? In that way, you can provide the width and height necessarily.
eg:
image {
width: 64px;
height: 64px;
}
My site displays a number of photos (with a variety of aspect ratios) and clicking one opens it in a modal. To get it to fit into the modal without cropping, scrolling, or distortion I used the following class on my img tag
.img {
max-height: 100%;
max-width: 100%;
object-fit: scale-down;
}
You need a div to wrap your image to have a consistente aspect ratio.
You can use the padding-bottom trick to force the div to respect an aspect ratio and a absolute positioned image to fill the space.
The image will be also responsive, taking all the horizontal space available.
.img-frame{
width: 100%;
padding-bottom: 100%;
background: gray;
overflow: hidden;
position: relative;
}
.img-frame-4by3{
padding-bottom: 75%;
}
.img-frame-16by9{
padding-bottom: 56.25%;
}
.img-frame-5by1{
padding-bottom: 20%;
}
.img-frame img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div style="max-width:100px; margin: 1rem auto;">
<p>4:3</p>
<div class="img-frame img-frame-4by3">
<img src="http://placekitten.com/g/400/400" />
</div>
<br />
<p>16:9</p>
<div class="img-frame img-frame-16by9">
<img src="http://placekitten.com/g/400/400" />
</div>
<br />
<p>5:1</p>
<div class="img-frame img-frame-5by1">
<img src="http://placekitten.com/g/400/400" />
</div>
</div>
With css:
.img {
display:table-cell;
max-width:...px;
max-height:...px;
width:100%;
}
The poster is showing a dimension constrained by height in most cases he posted >>> (256x256, 1024x768, 500x400, 205x246, etc.) but fitting a 64px max height pixel dimension, typical of most landscape "photos". So my guess is he wants an image that is always 64 pixels in height. To achieve that, do the following:
<img id="photo1" style="height:64px;width:auto;" src="photo.jpg" height="64" />
This solution guarantees the images are all 64 pixels max in height and allows width to extend or shrink based on each image's aspect ratio. Setting height to 64 in the img height attribute reserves a space in the browser's Rendertree layout as images download, so the content doesn't shift waiting for images to download. Also, the new HTML5 standard does not always honor width and height attributes. They are dimensional "hints" only, not final dimensions of the image. If in your style sheet you reset or change the image height and width, the actual values in the images attributes get reset to either your CSS value or the images native default dimensions. Setting the CSS height to "64px" and the width to "auto" forces width to start with the native image width (not image attribute width) and then calculate a new aspect-ratio using the CSS style for height. That gets you a new width. So the height and width "img" attributes are really not needed here and just force the browser to do extra calculations.
On my website I would like to display images uploaded by user in a new window with a specific size (width: 600px). The problem is that the images may be big. So if they are bigger than these 600px, I would like to resize them, preserving the aspect ratio.
I tried the max-width CSS property, but it doesn't work: the image's size doesn't change.
Is there any way to solve this problem?
HTML:
<div id="ImageContainerr">
<img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>
CSS:
img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }
I also tried setting the max-width: 600px for an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).
You can write like this:
img{
width:100%;
max-width:600px;
}
Check this http://jsfiddle.net/ErNeT/
I see this hasn't been answered as final.
I see you have max-width as 100% and width as 600. Flip those.
A simple way also is:
<img src="image.png" style="max-width:600px;width:100%">
I use this often, and then you can control individual images as well, and not have it on all img tags. You could CSS it also like below.
.image600{
width:100%;
max-width:600px;
}
<img src="image.png" class="image600">
The problem is that img tag is inline element and you can't restrict width of inline element.
So to restrict img tag width first you need to convert it into a inline-block element
img.Image{
display: inline-block;
}
Given your container width 600px.
If you want only bigger images than that to fit inside, add:
CSS:
#ImageContainer img {
max-width: 600px;
}
If you want ALL images to take the avaiable (600px) space:
#ImageContainer img {
width: 600px;
}
Try this
div#ImageContainer { width: 600px; }
#ImageContainer img{ max-width: 600px}
Your css is almost correct. You are just missing display: block; in image css.
Also one typo in your id. It should be <div id="ImageContainer">
img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
<img src="http://placehold.it/1000x600" class="Image">
</div>
Wrap the element in a div with the fixed width/height:
<div style="width: 600px;">
<img src="whatever" />
</div>