I want to make an image stay at a certain height, but I also want it to stay at the width of the user's screen.
Here's the image's CSS:
#cafe {
max-width: 100%;
height: 700px;
}
Here's the output:
you can try this
#cafe {
width: 100%;
height: 100vh;
}
here the 'vh' means VIEWPORT HEIGHT which automatically takes the user's screen height.
Related
I have a div container which contains an img with height of 311px.
The parent container follows the height of that image, but I want my container to have a height of 532px.
I have set the image CSS to width: 100%; height: 100%; object-fit: cover; so that the image, even small, will still fill the container without any distortion, but I need to make the container to be responsive even when the screen gets smaller, and I've set the height to 532px so when the screen gets smaller, the height of div remains the same.
Is there any way to set a "default" height to div container, but adjusts when screen gets smaller?
here is the code html:
<style>
.inside-img{
object-fit: cover;
width: 100%;
height: 100%;
}
.container{
height: 532px;
}
</style>
<div class="container"><img class="inside-img" src="img.jpg"></div>
thanks in advance.
You should use min-height:300px; this sets the minimum height for your container and can be adjusted
I would like for my image to keep its normal width and height without stretching in the full screen browser. How could this be accomplished?
HTML
<!DOCTYPE html>
<img id='mountain' src='img/mountains.jpg'>
CSS
body {
margin: 0;
padding: 0;
}
#mountain{
width: 100%;
height: 600px;
}
#mountain{
width: auto;
height: auto;
}
You can add this attribute.
Try this.Hope it will work.
Good luck
#mountain{
object-fit: contain;
object-position: center;
width: 100%;
height: 600px;
max-height:600px;
}
Your issue is that you are using a combination of absolute sizing units and relative sizing units. Use either pixels OR percentages, but not both together.
If you want the image to stay the same fixed size, use absolute units such as pixels (px), or units based on font size (em or rem), for example:
#mountain{
width: 800px;
height: 600px;
}
If you want it to resize with the screen or its container, but keep the same ratio, use relative units such as percentages (%) or view port sizes (vw and vh), for example:
#mountain{
width: 80%;
height: 60%;
}
Of course, you should base these sizes on your image's aspect ratio and not some arbitrary values.
If you want the image to display with its original height and width, you can choose to not define width and height at all, which has the same effect as setting them to auto, as auto is the default value:
#mountain{
width: auto;
height: auto;
}
I am trying to set the width of my carousel to take up 100% of the width of the screen while the height takes up 35% of the screen from the top. I have tried numerous attempts to use % with height, but it just doesn't work.
This is my css:
html,body{
height: 100%; width: 100%; margin: 0;
}
.carousel-slide, .carousel-image, .carousel-inner{
height: 35%;
width: 100%;
}
/*carousel-image is the class for the images placed in the carousel*/
The reason why I dont want to use px or em is because I want the carousel to take up 35% of the screen regardless of the device the website is being used on (desktop browser, ipad, smartphone...)
Thanks in advance.
Try using 35 viewport height and 100 viewport width instead and see if that works.
.carousel-slide, .carousel-image, .carousel-inner{
height: 35vh;
width: 100vw;
}
img {
width: 100%;
height: auto;
}
The code above resizes the images width with the with of the page, while keeping the same ratio with the height.
Why doesn't
img {
width: auto;
height: 100%;
}
resize the image's height with the pages height, while keeping the same ratio with the width? Is there another way I can have that effect on my image?
May be height is not defined of parent of img. So please put any height to the parent of img then try.
When a user loads the page, I want an image to fill the entire screen. What I want is very similar to background-size:cover, but I want to be able to scroll down without the static background.
This is what I have so far:
body {
margin: 0;
}
#bg img {
z-index: -1;
position: absolute;
max-width: 100%;
}
The only problem with this, is that the image height is not restricted to the height of the browser window. height or max-height does not make any difference.
Is there any simple way of achieving this in pure CSS?
Use the vh and vw Viewport-Relative Length units.
#bg img {
height: 100vh;
width: 100vw; /* If you want it to be full width as well as height. */
}