I'm working on a project where a div dynamically shrinks as the page shrinks. Unfortunately the div stays the same height this way:
CSS
.container {
min-height: 180px;
max-height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 350px;
}
HTML
<div class="container"></div>
Instead of fixed height, use em/vh/% units for height depending on what is suitable. You can also use relative height with min-height and max-height to define a range. For example, try resizing the window and see that container always occupies half of available height.
.container {
height: 50vh;
background: green;
}
<div class="container"></div>
Related
I want to hide the bottom part of the image and only display the top 90% of the image,
I've tried to use
transform: translateY(10%);
and adding to the parent div the following property:
overflow: hidden;
but this makes an empty 10% on top of the image, I do not want empty space on top of the image how can I achieve that?
You could absolute position the image in a relative container with overflow: hidden. Just make sure the parent div is actually 90% of the height and the image is positioned top: 0%.
If you want to do it this way, I would suggest that you set the height of the image to 110% instead of 90%:
HTML:
<div class="image-container">
<img src="...">
</div>
CSS:
.image-container {
background-color: steelblue;
height: 600px;
overflow: hidden;
}
.image-container img {
height: 110%;
}
or if you know the size of the image, you can use object-fit and object-position. Let's say that the height of the image is 500px, then 90% of it would be 450px, then your css would be:
.image-container img {
height: 450px;
object-fit: cover;
object-position: top;
}
If I am using background-size: cover; for a background image and that image is only 800px wide but the viewport is 1500px wide, how can I make it so that the image does not exceed its own width? (I don't want it stretched any larger than it's original size.)
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
}
Add this css:
max-width: 800px;
But I don't want to add a CSS definition every time I use a different
image...
So you can try add CSS properties:
width: auto; - your image width will be scale to img height
max-width: 100%; - your image never will be wider than container wrapper
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
I'm trying to place a video into a container which has 100% width and auto height respecting the aspect ratio but with max-height set. I want the video to fill the entire container even if the sides are cropped and to be centered both horizontally and vertically.
I'm using fit-object property but apparently it doesn't work with max-height.
I'll simplify it with an image. The result should be the same.
HTML
<div>
<img src="...">
</div>
CSS
div {
width: 100%;
overflow: hidden;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Now, if I add to div style height: 100px, it works. If I write max-height: 100px, it doesn't. Is this expected behaviour? If so, what can I do to make it work?
Here is jsFiddle: http://jsfiddle.net/1r4mLvLq/
height: 100%; works only if an ancestor element has an explicit height set.
You can accomplish that by adding this CSS:
html, body {
height: 100%;
margin: 0;
}
Updated Fiddle
I have an image of 2000* 8000 pixels. I wanted to make the width as same as the loading window while the height must be scrollable.
I mean that after the page loads width:100% and height:25% must only be displayed of the image. Then when i scroll down the rest of the height must be displayed i.e. the image should only scroll downwards not sideways.
.img {
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
html {
background: url(importantwebsite.jpg);
background-size: 100%;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
}
I have used the above code but it displays 100% width and 25% height, And the rest of the image is not shown. Please help..!!
demo - http://jsfiddle.net/victor_007/uoco335z/
change the width:100% and height:auto of the image
.img {
width: 100%;
height: auto;
}
<img class="img" src="http://placeimg.com/2000/8000/any">
Remove max-height:100% and apply height:100% !important like below.
.img{
max-width: 100%;
height:100% !important;
}
DEMO