I am trying to use CSS to limit an img's height. If its height is greater than the one given, it should scale down to the desired height, and scale the width, as well. They have no parents.
I have come up with this:
img {
max-height: 500px;
width: auto;
}
It doesn't work.
If you want to make responsive than you should use % to the place of px ; this link will help you . https://www.w3schools.com/css/css_rwd_images.asp
You may want to consider using this image as a CSS background image while also using the 'background-size' property.
IE:
.img-wrap {
background: url(/path/to/image.jgp) no-repeat;
background-size: cover; /* 'cover' is one of many other options */
}
CSS background-size Property
Related
I am trying to make a slider with background images, when I am trying to make it fit to the mobile screen, the proportion is affected and look as pixels, how can I resize the background-image to fit the mobile screen without affecting the proportion.
and when I increase the height to :
background-size: 100vw 55vh !important;
height: 55vh !important;
You can use the object-fit property to maintain the aspect ratio of the image:
img {
height: 55vh
object-fit: contain;
}
contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
Instead of fixing both height and width of the image, just define the one which you need (for example width) and set the other one to auto. For height that would be:
background-size: auto 55vh;
height: 55vh;
that way the original image proportion will be kept, avoiding a distorted image.
you can use this CSS:
{
background-size: contain;
background-repeat: no-repeat;
}
if it didn't work please share your code. I know I can help you.
I have an img inside a div tag, and currently I am using the CSS
img {
max-height: 100%;
max-width: 100%;
}
This currently keeps the images fitting inside the div, which is what I wanted. However, if the image file is smaller than the div, the image will not be the maximum size it can be. Is there an easy way to maximise the image, while keeping the image inside the div, and keeping the original aspect ratio?
I've tried setting the height to 100%, with a max-width of 100%, but this distorts the image, which is not what I'm looking for.
I also tried object-fit: contain;, but this doesn't seem to do anything.
Thanks :)
Try doing adding it as background, then you can do this:
div {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Michelangelo's answer is another way to achieve your objective. If you want your image to be inside a img tag (like your original post), keep your max-width and max-height values, and put one of these inside your CSS class:
1) Keep aspect ratio based on width:
width: 300px; /* Your preferred width */
height: auto;
2) Keep aspect ratio based on height:
width: auto;
height: 300px; /* Your preferred height */
I would also suggest you to take a look at the object-fit property here:
https://www.w3schools.com/css/css3_object-fit.asp
It kinda acts as background-size property when you put values like contain or cover, with the plus that you can specify width and height without complicating your layout / DOM hierarchy. It comes very handy when dealing with intrinsic sizes of elements.
If you want to keep the image as an HTML element and not a CSS background, I would use object-fit. There are browser support limitations with this CSS property.
https://caniuse.com/#search=object-fit
You could use a polyfill to combat this. Such as:
https://github.com/fregante/object-fit-images
An example of what I believe you're after could be:
https://codepen.io/bin-man/pen/NWKNWLm
.image-container img {
object-fit: cover;
}
You can play around with the image sizes and remove object-fit to see how it behaves.
Hope this helps.
I guess this is what you need... Please run the code snippet...
div {
width: 100px;
height: 100px;
}
div > img {
max-width: 100%;
max-height: 100%;
object-fit: scale-down;
}
<div>
<img src="https://www.wellnesspetfood.com/sites/default/files/styles/blog_feature/public/media/images/6615505_950x400.jpg?itok=ylLXPrq6" />
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg" />
</div>
I'm writing an html page with parallax using stellar.js.
In CSS I use:
html, body {height: 100%;}
#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }
But the image is cut and the bottom of the image is not visible.
Is it possible to set the height of the section (#slide1) to show all the image?
Using background-size:cover; will always crop your background image either vertically or horizontally, except when the element has the exact same h/w ratio as the image. The key is to choose and position the background in such manner that it still looks good when it is cut.
Most likely, you want to give your element a min-height, e.g.:
#slide1 {
min-height: 600px;
}
Keep in mind the most popular desktop ratio is 16:9 and most mobile devices are held vertically. If necessary, use #media queries for different device/viewport widths.
If you don't want your slide to have a larger height than the viewport height (deviceScreen|browser height), add max-height: 100vh!important; to the above rule (useful on mobile devices).
Try setting #slide1 height property to 100% instead of using auto.
I am loading a while bunch of photos onto my page and they are all different sizes. I need to bring them all down to the same size* (which is: x200px by y400px) _while maintaining aspect ratio.
How do I do this in pure CSS?
The following CSS class will restrict them to the sizes you specified. diffferent aspect ratios may have smaller height or width but the aspect ratio is maintained
.yourimage{
width:200px;
height:400px;
background-image: url("yourimage.png");
background-size: contain;
background-repeat:no-repeat;
background-position: center ;
}
here is a fiddle with example
http://jsfiddle.net/LgZtD/
CSS cannot change the sizes of your images, that's not what it is for. You will lose the aspect ratio if you insert the images into img tags with width:200px and height:40ppx.
What you can do though is use CSS to show a 200px x 400px element with the image as a background, and then use the background-size property to have the image cover the 200px x 400px space. CSS will find the most efficient way to cover that area without changing the size of the image
.image {
width: 200px;
height: 400px;
background-image: url(/url/to/image);
background-size: cover; //This will cover the area of the image
background-position: center center; //Have the image centered
}
http://codepen.io/herihehe/full/aLwGt
This is a great example of what you want. Look at the difference between contain and cover. Contain shows the actual size of the image. Cover "covers" the area
I think this is what you are looking for:
img {
height: auto;
width: auto;
max-height: 400px;
max-width: 200px;
}
Fiddle example here
I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can't change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.
I can't seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use 'width: 100%' but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.
I've added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.
<div id="image-container">
<div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>
Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?
Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.
I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done.
Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so:
body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}
This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript.
EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know.
Hopefully soon you'll be able to use the new srcset attribute on the img element. If you want to use img elements now, the currently accepted answer is probably best.
However, you can create a responsive background-image element with a constant aspect ratio using purely CSS. To do this, you set the height to 0 and set the padding-bottom to a percentage of the element's own width, like so:
.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* for a 4:3 aspect ratio */
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value. This works because padding percentage is always calculated based on width, even if it's vertical padding.
Try this
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Simplified version
html {
background: url(image.jpg) center center / cover no-repeat fixed;
}
Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%;.
Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.
Edit: Changing the image on different size of the window
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>
In this way you change your image in different size of the browser.
You can use the CSS property background-size and set it to cover or contain, depending your preference. Cover will cover the window entirely, while contain will make one side fit the window thus not covering the entire page (unless the aspect ratio of the screen is equal to the image).
Please note that this is a CSS3 property. In older browsers, this property is ignored. Alternatively, you can use javascript to change the CSS settings depending on the window size, but this isn't preferred.
body {
background-image: url(image.jpg); /* image */
background-position: center; /* center the image */
background-size: cover; /* cover the entire window */
}
Just use a two color background image:
<div style="width:100%; background:url('images/bkgmid.png');
background-size: cover;">
content
</div>
Add the css:
html,body{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100%;
}
And html is:
<div class="bg-mg"></div>
CSS: stretching background image to 100% width and height of screen?
It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.
.your-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
html{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
I was also facing your problem. Two solutions come to my mind through HTML and CSS :
Solution 1) HTML img tag
.img-container {
width: 100%;
border: 1px solid #000;
}
.img-container img {
width: 100%;
pointer-events: none;
}
<div class="img-container">
<img src="https://i.postimg.cc/ht1YnwcD/example.png">
</div>
Solution 2) CSS background image
First find width and height of your image file, you can right click on your image and choose Properties then go to details tab. you can see your image dimensions (according to the picture).
enter image description here
Then remember them.
.img-container {
width: 100%;
// height: calc(100vw / (your image width / image height));
height: calc(100vw / (812 / 133));
background-image: url('https://i.postimg.cc/ht1YnwcD/example.png');
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
border: 1px solid #000;
}
<div class="img-container"></div>
I hope it was useful ;)