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>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I've been looking online for a viable solution to my problem but could not find a clear answer, so I am posting it here.
The problem is that I want to have the image cover the entire , but there seems to be some left over space below the image and I can't seem to be able to fill it up. I'm taking about the blue space in the as shown in this image:
I'm not looking for a workaround the solution. I just want a definitive solution that corrects the problem
Just add a display: block or vertical-align: top to your img tag.
img {
width: 100%;
height: auto;
display: block;
}
.cover {
background-color: blue;
}
<div class="cover">
<img src="//unsplash.it/460/345" width="460" height="345" alt="">
</div>
Try changing
img {
width: 100vw;
height: 100vh;
display:block
}
It is good if you can post a jsfiddle. so then we can looking into your actual code.
What I usually do for images is first determine if the image is landscape or portrait (i.e. if the image is wider than it is tall or vice-versa). Then I set the image's height or width to 100% depending on the orientation. And then overflow: hidden on the parent container so that the result is an image that has preserved the aspect ratio and covers the container.
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).
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.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
flexible or centered page HTML CSS
I need a flexible or centered page design that works even for users with screen resolutions of 800*600. (CSS + HTML)
Should I use % or px for width and height?
Could you please give any example link?
<div id="content">
</div>
#content {
width:800px; (or width: 80%;)
margin:0 auto;
}
example: http://jsfiddle.net/UyUFa/
This question already has answers here:
Fit background image to div
(8 answers)
Closed 3 years ago.
Why won't it show the whole original picture?
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
}
<div class="test"></div>
Problem is that is doesn't show anything, if you type something in the div it shows a little bit of the image. I want it to include the full picture.
Here is the working demo
You need to specify the height
.test {
background: url("http://i27.tinypic.com/28ktoh.jpg") no-repeat;
overflow:auto;
height:500px;
}
Set the height of the div. The div will not be higher than you tell it to be or higher than it needs to be.