This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 7 years ago.
I have a div with width:100%, and I need the height of the same div to adjust according to how many pixels wide the page is. The reason is because an image is stretched across full width of the div, and if I set a solid height, different resolutions will render it differently and the image looks stretched out.
Is there a css solution to this?
You could leave it as auto:
<div id="mydiv"><img src="..." /></div>
#mydiv,#mydiv>img{width:100%; /*height:auto;*/}
You can omit height:auto because is the default value.
you can do that with css media queries see http://www.w3.org/TR/css3-mediaqueries/
basically you'll have a bunch of media queries like the following:
#media (min-width: 1024px) {
div {height: 200px;}
}
obviously change the width and height combinations to whatever you need, and you can also use max-width or width as required
Related
I googled everything and it seems that every example, every Stack Overflow answer doesn't work for me. I want to make two images the same height, I already made them the same width and I can make them the same height if I put for example img {height: 400px;} but I don't want that because the when the screen resolution is smaller or larger that can look bad.
And I saw that this can be fixed by using flex or grid but I really don't want to, I know that there is a small solution for this or a simple hack, but if everything else failed I guess I have to.
This is the CSS and HTML code:
.container {
padding: 20px;
margin: 20px;
overflow: auto;
text-align: center;
}
img {
padding:3px;
width: 49%;
object-fit:cover;
box-sizing: border-box;
}
<div class="container">
<img src="https://www.w3schools.com/css/rock600x400.jpg"/>
<img src="https://www.w3schools.com/css/paris.jpg"/>
</div>
EDIT: (added the links that I tried)
Two divs side by side - Fluid display
Two images, side by side responsive
Two image on the same row and with the same height CSS
How can I make all images of different height and width the same via CSS?
CSS - Divs with same height, but different image heights
Making responsive images with different aspect ratios the same height
+ more.
some of them use flex others table others they set the height to a constant, that's not what I'm looking for.
THANKS
try using 'em' or 'rem.' Those adjust depending on the size of the window.
This question already has answers here:
Bootstrap 3 two columns full height
(19 answers)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 4 years ago.
I'm trying to set 100% of height to a HTML element.
On mobile, this div will go under the .div_left div, and the floating will be cleared.
I have these divs on my theme:
<div class="col-md-7 div_left"></div>
<div class="col-md-5 div_right"></div>
<div class="clearfix"></div>
I give them this css: (global bootstrap.css also included)
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px; height:100%;}
I tryed height:100vh; but that's not working, when the page has to many content, and I can scroll it vertically.
I also tryed min-height:100% but that didn't work. I can see the right div gray background, but that's just because it has padding.
Screenshot here
Second try:
Second image
Use min-height 100vh on the entire row...
.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px;}
.mvh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/vTYz8XE6cG
Desktop:
Mobile:
To use height:100%; a parent element should have a height: fixedHeight; because that it's not working for you.
https://www.w3schools.com/cssref/pr_dim_height.asp
% Defines the height in percent of the containing block
What you need to define is: 100% of what?
Here's more information about vh
Make a div 100% height of the browser window
There says:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
This question already has answers here:
Fit div size to background image
(3 answers)
Size the DIV to the size of the background image
(3 answers)
Closed 4 years ago.
I have a div with some content and want to have a background image. However, I want to be able to see the full height of the image. I could add a load of padding to the top and bottom of the content but I want this to be dynamic for all screen sizes.
div{
background-image:url(https://via.placeholder.com/350x150);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* height 100%; */
text-align:center;
}
<div>
Some content
</div>
I know I could also just add an <img> tag to the <div> but there is a lot of content in this that would then have to be floated around to overlay the image.
I don't mind using JS/jQuery to resolve this.
To make something fit the full height of the screen instead of using 100% as you would for width, using vh, so in your case:
height: 100vh;
This will work dynamically depending on the users screen dimensions, you can read more about this as well as see examples here.
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 8 years ago.
I'm using Bootstrap for my responsive layout. Within the .container I want to have a div which isn't limited to the width of the container. Furthermore I want it to be stretched over the full body. I could place the div outside the .container but I don't want to mess around with absolute positioning or similar.
How can I make a div 100% to the body, even if the parent div is not filling the whole width of the body.
.div {
width: 100%;
height: 6px;
}
Thanks
Use class .container-fluid instead of .container. Bootstrap provide .container-fluid class to make full screen div.
If you are specific to some requirement please share code as well to understand better.
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 9 years ago.
How Can I create a 100% height div of the current viewport size?
I know there are many resolutions around there, and I want to create a div that is high enough to cover the current size of the viewport.
Suppose the viewport is at the moment the size of one of a 1920x1080 resolution screen, but Also, someone else from a 1024x768 resolution screen wants to view the page, I want the div to be displayed 100% of the height of the viewport it is displayed on.
Is it possible with just css?
give 100% height to html and body, as well as to the div.
You can use a fixed position.
Add this to the body:
<div style="position:fixed; width:100%; height:100%; top:0; left:0;"></div>