This question already has answers here:
How to use css media queries correctly for responsive design
(2 answers)
Closed 6 years ago.
I've seen on a few websites in the past where a background image on a big DIV (say 100vh and 100vw) will stretch as the browser grows, but when a certain lower threshold is met (e.g. 800px), the background image doesn't stay at 100%, but starts clipping the background image instead.
I can't find those pages anymore now that I need to do it myself. CSS solution?
You can still use 100vh and 100vw something like below -
body {
margin:0; /* reset any browser-default margins */
height:100vh;
width:100vw;
}
img {
height: 100vh;
width: 100vw;
}
<body>
<img src="https://www.gstatic.com/webp/gallery3/1.png" />
</body>
Hope this will help you in some way (y).
Related
This question already has answers here:
React force background color full height
(3 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
I am trying to set background color to the pages in my React app. I want to set a background color extending to the full page length and width but I cannot do that, for forms or tables extending beyond, I set height/width or min-height/min-width to 100% and I get the result for larger contents but for smaller contents,I get this:
I want to have the entire page of blue color.
This is my css file
.body
{
margin:0px 0px 0px 0px;
background-color:#4086ef;
padding:10px;
height:100%;
width:100%;
}
If I set height to 100vh, I get the undesired result but with contents going beyond the page.
(Content rendering is dynamic so I don't know when the content will go beyond and when not).
EDIT:
The table doesn't squeeze along when I compress the window and neither does the overflowing part follow the background color but the height follows the background color even when scrolled.
You just need to add height:100vh.So that it will cover your whole screen.
Try with this
* {
box-sizing: border-box;
}
body {
margin: 0;
}
div {
background: red;
color: white;
min-height: 100vh;
padding: 10px;
}
<div>
Test
</div>
You can use:
height: 100% !important;
This question already has answers here:
CSS Image size, how to fill, but not stretch?
(18 answers)
Closed 4 years ago.
really basic question, but I do marketing for a client so don't know too much besides basics HTML, CSS.
I've got an image slider in the URL below, what should I do so the image occupies the full space of the container (as there are bars on either side of the image). Do I just remove the padding or is there something more efficient to put in the stylesheet. Thanks heaps for your help
https://www.vibrantrealestate.com.au/property/outstanding-warehouse-space-style-on-the-citys-edge/
Try to add this rule in your CSS file :
.inspiry_property_portrait_slider .flex-viewport ul li a img{
width: 100% !important;
}
Here is the result :
Use the following css
div
{
background-image:url(http://placekitten.com/200/300);
width:300px;
height:100px;
background-repeat:no-repeat;
background-size: cover;
}
<div>a</div>
This question already has answers here:
CSS: center and scale up or down image while preserving aspect ratio
(4 answers)
Closed 7 years ago.
I am building a responsive website. On the homepage I have a number of articles whose thumbnails should be displayed at 230px * 115px at full size desktop output. The article publishers will be uploading images of all sizes with no particular set aspect ratio.
I currently just have code to resize an image based on it's parent container. the width will be 100% of it's parent container and the height is automatic and will vary depending on which aspect ratio of the original image.
.img {
width:100%;
height:auto!important;
}
Is not really cutting the mustard.
My research suggest using a background img with background-size:cover. Is this a good way to go is it possible to center the cover horzontally and vertically? And work responsively?
Abit more direction would be great there are alot of articles our there but I can't find the exact answer to my needs.
update: #LGSon That's Great thankyou. It's the best solution I have tried so far.... I like the way the image is controlled within the div. Perfect. I guess the difference is now how to control the aspect ratio of the div. if i set the width to 50% the height it still fixed.
Your <img> rule is good, but you have to pack each <img> into another container that gets a percentage-based width and height: auto;
You can do this:
CSS
div {
display: block;
overflow: hidden;
}
.img {
width: 200%;
height: auto!important;
margin: -50%;
}
HTML
<div>
<img class="img" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png">
</div>
DEMO HERE
You should set the image rule to, along with your other rules.
.img {
width:100%;
max-width:100%;
}
Will you know the dimensions of the image or are they unexpected?
The rule above is meant if you control the image and its accordance to your ratio in the design.
height is auto by default and adding !important to it does not make much of a difference.
Using a background image is a neat feature but cover will not do the job as expected. It covers the container with the images stretches or shrunk as needed to fill it entirely. Background images are also not recommended for performs reasons as they are loaded regardless of being displayed on the page or not as part of the css file, unless you load CSS files on demand with that request which is not necessary.
Hoep this helps, I will be glad to clarify.
I also disagree with the comment made about setting the parent container's height to auto as it does nothing. This is the default behaviour...
This question already has an answer here:
Maintain aspect ratio of a div according to height [duplicate]
(1 answer)
Closed 8 years ago.
Is it possible to make a square div with css based on its height in pixels?
This question is similar to this one (marked as duplicate), but in this case I want height to be set in pixel or any unit.
When based on width, there is a simple solution :
.mydiv {
height: 0;
padding-bottom: 100%;
}
But here 'height follows width'. I'm looking for solution where 'width follows height'. So if I would set height to 300px, width would follow it.
For now I'm doing it using javascript, updating on window resize. But I would like to find a CSS solution, thats why I'm not looking for a javascript solution
Here is a playground
You could use the new viewport size units
JSfiddle
CSS
html,body {
height: 100%;
margin: 0;
}
div {
background: red;
height: 100vh;
max-width:100vh;
box-sizing: border-box;
}
Support is effectively IE9 and up
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 8 years ago.
So I have this very basic question that I was wondering about. I just set a background through css with
body {
width: 960px;
margin: 0 auto;
background-image: url("../img/background2.jpg");
}
Why is the image showing up at both sides as well and not only in the center 960 pixels? If I put my background image in a navigation class selector, it does work:
.container {
background: #099;
}
Why is that? Shouldn't the body image be restricted by the width that I set?
Here is my code: http://jsfiddle.net/nB22j/
Also, is there any use for the .container selector if I can just put everything in body {} ? (In this case I do want the background to fill the full browser so I can put my background in body {} but I'm just wondering...) I'm not sure anymore why I added the container div in the first place. Any reason for it to exist?
Because, if you set no background to HTML , body's background is applied to HTML too.
Just add this : DEMO
html {
background:#fff;/* or any color/image/gradient you want */
}
and your background for body will only be drawn where body stands.
See W3C for more infos.