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).
Related
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
My HTML and body width isn’t 100% when the browser window is under 400px wide. However it works perfectly over 400px wide.
I’ve tried setting body and html to padding:0 and margin: 0 and a CSS reset * and well as border-box properties from solutions posted here which haven’t worked for me.
Test website link: https://louisefindlay23.github.io/
The orange background and content should extend to the whole page exactly as it does when the browser window is over 400px wide.
Your Foundation ZURB image is too wide at that resolution. Give it (and your other images) the CSS rule of max-width: 100% to make it responsive and fit on that size screen.
E.g. img {max-width:100%;}
I use a 1920px wide screen. But when I inspect the html tag with chrome devtools on websites such as firebase or facebook messenger, this is what I see :
But these websites appear fullscreen, so I expected them to match my screen width.
Why is there a difference between my screen width (1920px) and the html tag width (1440px) and how to achieve this ?
If you set the width of the body of your HTML to a fixed width of 1440px, it will be 1440px even if the user screen is bigger or smaller than this. What you can do is set width to width: 100%; and a max-width: 1440px. That would make the size of the body to be the size of the screen if the screen is smaller than 1440px and 1440px if the screen is larger or equals to 1440px.
If I understood correctly what you are asking, you have a sidebar menu and a dashboard that needs to fullfill the screen. In that case, you could do:
.side-menu {
width: 20%;
}
.dashboard {
width: 80%;
max-width: 1440px;
}
#media (min-width: 1500px) {
.side-menu {
width: 100%
}
}
Using media-query makes you set different CSS properties for the elements in your HTML, depending, in this example, of the screen size. What I did: if the screen size is smaller than 1440px, the sidebar fills 20% of it and the dashboard fills 80%. If the screen size is bigger or equals to 1500px (a little big bigger than the max-width of the dashboard, to fit the sidebar also), the dashboard stays at 1440px and the sidebar fills the rest of the screen width (width: 100% makes the sidebar takes all the width that is left of the body).
Obviously in bigger websites such as Facebook etc it's a much more complex thinking than just CSS, because they have to consider the data flow, the device the person is using and many other things.
Either you have setup a DPI scaling on your PC or have the zoom level in your browser to something higher than 100%
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 am developing responsive site and have maybe a common problem, but i couldn't find the answer and need your advice. I want browser window fix on height:500px on mobile screen. Now i have this situation (look at the pic). I need to avoid white color below and want my container fit the whole screen and height not more then 500px.
Thank you for any advice!
Set Your container height and width to 100%.
#container
{
height : 100%;
width : 100%;
}
if you dont want your height to be more than 500px, you can use max-height property.
max-height : 500px;