How can I have an image take scale the screen while keeping it's aspect ratio in CSS? For example, if I have an image that is taller than it is wide its height should be 100% (and width: auto;). But if the image is wider than it is tall its width should be 100% (and height: auto;).
Can I do this in CSS?
If the height and the width are both 100% than the image is all squished together like so:
If the height and width are both auto, the image scales correctly unless it is smaller than the screen's size, then it leaves gaps around its edges:
You can use object-fit: cover, this ensures that the image doesn't lose its aspect ratio. You can also use a percentage value like width: 70%, and height: auto so the image scales down when resized
Related
I am getting a bunch of image URLs and I am displaying them in my webpage. By default I set all the images to have <img height = "200px" width = "200px">
The issue with this is that some images don't scale and look squished, how do I dynamically scale each image so that it doesn't look squished but is smaller. For example if I have a picture that is 16:9 I'd like it to keep that ratio when making it smaller.
So, you want an image to have width and height of 200px, while maintaining aspect ratio.
If you set height and width in html, it will lead to image not maintaining the aspect ratio.
Instead use CSS.
<img class="myImg" />
In styles.css
.myImg {
max-width: 200px;
max-height: 200px;
}
What I want to do on the background image is to expand width or height depending on the ratio of the browser size compared to that of the background image.
In this one the image is (almost) not streched; and I want the image to keep its original ratio. Basically, The width and height of background image would follow those of the browser screen.
In this screenshot, the image must be expanded to up and down because its width/height ratio is larger than the original. And the exceeded parts should be out of the browser pane.
In this one, the width/height ratio is smaller; as long as keeping its ratio and fitting the image height to the browser's height, the image should be stretched to left and right.
Hope you to understand what I want to do.. I think I might have to use something like if-then statement to detect the browser ratio and respectively change which side to fit to the image. Or are some other techs required to do this task?
Without the help of Javascript, I would suggest to use:
body {
background-image: url(image.jpg);
background-position: 50% 50%;
background-size: cover;
}
The background-position: 50% 50% will center the image horizontally and vertically. The background-size: cover will make the image cover the whole body.
Demo
I'm trying to make my background image on my splash page resize to smaller sizes. I want the image to cover the entire section whatever size screen it may be.
.splash{
background-image: url("../images/lanternboys_medium.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding-bottom: 40px;}
When I view this on my ipad the picture is huge! I've read that others have tried removing the height and width and set background size as "contain" but it doesn't stretch to what I want without the "cover" function.
The current size of the picture is 1366x911 but I do have a larger size of 5184x3456.
Any tips would be greatly appreciated!
Most of the time, vw and vh units doesn't work properly on iOS devices. Maybe if you set your background height to 100% and the background width to auto? Since your height is smaller than the width, it should do the trick.
I have an image in a website (the website is responsive). the image should always have 100% height of the parent div (that has a height of 100%) but with aspect ratio.
my example
I tried with CSS:
max-height: 100%;
max-width: 100%;
width: auto!important;
But this way the picture has always 100% height of it's original size. I want it bigger than it's original size, but with aspect ratio.
Change the CSS to:
height: 100%;
display: block;
float: right;
By removing all width references, most if not all browsers will scale it proportionally and keep the aspect ratio. By specifying the height as 100%, it will fit the height of the image to the height of the parent container and stay responsive.
Have you considered changing your CSS to the following?
img{width:100%; height:auto;}
That way all of your images will respond to the width of their parent element and keep their aspect ratio
Use the CSS tags "width" and "height" to make it bigger. For example:
width: 200%;
height: 200%;
Good luck!
*Fiddle Demo
I have an image with 100% of width inside a div with a width of 820px. When I scale down the image to a screen size of an iPad and an iPhone 5, the image scales down to, but in that sizes I want the image to be 100% of the screen size width.
I already tried to use a width of 100% in the Media Queries, but the image never scales to a full width.
Which is the best to make an image responsive with a full screen width in tablets and smartphones? Considering that I'm using a grid that have a max-width of 960px (the Skeleton grid: http://www.getskeleton.com/)
Thanks.
An image of width 100% will be the 100% width of its parent. So yes if the parent is 820px wide, then that's how wide the image will be. If the parent is 960px wide then that's how wide the image will be.
So you will need to change the width of the parent div in the media query (probably in the same one that you are setting the image to 100% width).