I have a simple webpage with a main section that is 85vh and a "floor" which is 15vh. The floor element contains an image which I want to look like the floor of the page. It has a checkerboard pattern that fades to white and looks like a floor.
My current CSS is working pretty well, however, the problem I'm having is when the user makes the window skinny (less than 800px or so in width), the floor image stars to become really small and it doesn't look good and it doesn't look like a floor anymore.
What changes should I make to the CSS to make the image in the floor element looks like the "floor of the page", no matter what the width or height of the window is? It should probably be centered and adapt to the window width, but not get smaller than 1920px or so the floor looks the same size at any window width, but gets cropped automatically to adapt to the page width.
https://jsfiddle.net/z7w41vd5/
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
.main {
height: 85vh;
}
.floor {
height: 15vh;
min-width: 1920px;
width: 100vw;
}
.floor img {
width: 100%;
}
<div class='wrapper'>
<div class='main'>
</div>
<div class='floor'>
<img src='https://i.imgur.com/VuLVv68.png'>
</div>
</div>
Make it a background image instead of an <img /> and you'll be able to control it the way you want to.
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
.main {
min-height: 85vh;
}
.floor {
min-width: 1920px;
min-height: 15vh;
background: url(https://i.imgur.com/VuLVv68.png) bottom center;
}
<div class='wrapper'>
<div class='main'></div>
<div class='floor'></div>
</div>
Alternatively, you could make it the background of the <body> and remove the floor element from your html entirely.
html {
height: 100%;
}
body {
background: url(https://i.imgur.com/VuLVv68.png) bottom center no-repeat;
min-height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
<div class='wrapper'>
<div class='main'></div>
</div>
Related
I have a 2 column layout in which one column contains an image and the other column contains space for text, buttons etc.
Problem
The problem that I am having is with the image column specifically. When the image column is scaled at larger viewports, it works great and scales exactly as planned. Both the columns adjust at the same height and all items scale properly. However, as the window gets smaller, the image keeps getting smaller as well. The two columns are no longer even and the background of the image column begins to show. I think this is happening because the image is trying to keep the same aspect ratio.
Intention
The intention is that as the viewport scales down, The respective columns also scale down while keeping their same width ratio and the height of the two columns should always match.
Tried / Failed Solutions
height: 100% on the img attribute - this results in the columns not scaling properly.
Using the picture element instead of the img tag
using object-fit of cover and fill on the image.
Here is a code snippet and a JSFiddle
http://jsfiddle.net/CztS6/37/
.flex-container {
width: 100%;
min-height: 300px;
margin: 0 auto;
display: flex;
}
.full-width-four {
width: calc(33.3333333333%);
float: left;
margin-left: 0;
background: #dbdfe5;
flex: 1;
}
.recruitment{
display: block;
height: auto;
max-width: 100%;
object-fit: cover;
}
.full-width-eight{
width: calc(66.6666666667%);
float: left;
margin-left: 0;
background: #b4bac0;
flex: 2;
}
<div class="flex-container">
<div class="full-width-four">
<img class="recruitment" src="http://via.placeholder.com/570x415">
</div>
<div class="full-width-eight">Column 2</div>
</div>
Here is my solution, Is this what your are looking for?
I commented min-height: 300px; for flex-container
I also added width:100%; to the image
.flex-container {
width: 100%;
/* min-height: 300px; */
margin: 0 auto;
display: flex;
}
.full-width-four {
width: calc(33.3333333333%);
float: left;
margin-left: 0;
background: #dbdfe5;
flex: 1;
}
.recruitment{
display: block;
height: auto;
max-width: 100%;
object-fit: cover;
width:100%;
}
.full-width-eight{
width: calc(66.6666666667%);
float: left;
margin-left: 0;
background: #b4bac0;
flex: 2;
}
<div class="flex-container">
<div class="full-width-four">
<img class="recruitment" src="http://via.placeholder.com/570x415">
</div>
<div class="full-width-eight">Column 2</div>
</div>
I have an image in a container div below which is a div containing text that can scroll. The image can vary in size so the height of the image will vary depending on the image being displayed i.e. it isn't always 400 x 200 as in my example.
My problem is that when the text scrolls there is a space between the image and the point where the text should scroll behind the image. This seems to be because the image container div is not the same size as the image.
This JSFiddle shows the problem https://jsfiddle.net/t0ag2z5k/50/
Can anyone tell me both why this is happening and how to fix it please?
CSS code below...
#plotdetails {
display: flex;
flex-direction: column;
float: left;
width: 400px;
z-index: 5;
position: fixed;
height: 100%;
}
#plotdetails #plot-img-container {
display: inline-block;
}
#plotdetails #plot-img-container img{
width: 400px;
display: inline-block;
}
#details-text {
padding: 0 20px 0 20px;
overflow-y: scroll;
flex: 1;
}
HTML here
<div id="plotdetails">
<div id="plot-img-container">
<img src="http://placehold.it/400x200">
</div>
<div id="details-text">
<h1>Lot's of words here....</h1>
</div>
</div>
Why do you want your image to be display as an inline-block when it's not utilized as such? Try (https://jsfiddle.net/t0ag2z5k/52/):
#plotdetails #plot-img-container img{
width: 400px;
display: block;
}
I'm trying to center an element (im my case an image) with arbitrary size inside a box. Everything works fine in Webkit browsers, but Firefox stretches images that are longer than they are wide.
To illustrate the problem, I create 3 div as boxes, each of containing a differently sized image. The boxes are all set to a fixed width and height, and a couple of flexbox rules are applied to center the image both vertically and horizontally.
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 100px;
height: 100px;
border: 1px solid black;
justify-content: center;
align-items: center;
float: left;
margin-right: 50px;
}
.box img {
max-width: 100%;
max-height: 100%;
}
<div class="box">
<img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/150x300/eeeeee.png">
</div>
The img should be shrunk such that they exactly fill the box (either horizontally or vertically, which ever side is longer), but preserving the aspect ratio. This is exactly what happens in Webkit browsers. However, Firefox just stretches the one image that is longer than high in vertical direction. How can I make Firefox behave the same way as all the Webkit browsers?
Using "object-fit: contain" for the images seems to do the trick :)
.box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
http://jsfiddle.net/xjwguxs6/
Setting flex-basis: 100% fixes the issue as it sets the initial main size of the flex item. If the flex-direction is reversed i.e. column, you will need to use flex-basis: 100% on nth-child(3)
.box:nth-child(2) img {
flex-basis: 100%;
}
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 100px;
height: 100px;
border: 1px solid black;
justify-content: center;
align-items: center;
float: left;
margin-right: 50px;
}
.box img {
max-width: 100%;
max-height: 100%;
}
.box:nth-child(2) img {
flex-basis: 100%;
}
<div class="box">
<img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/150x300/eeeeee.png">
</div>
Note: I asked a very similar question recently, but was downvoted as I used an external URL as supposed to JS fiddle
I have the following code:
HTML:
<div id="homepage-banner-contents">
<div>
<img src="http://s.hswstatic.com/gif/whiskers-sam.jpg" alt="logo" id="banner-logo"/>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#homepage-banner-contents {
height: calc(100% - 60px);
background: red;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
#banner-logo {
max-height: 320px;
}
#banner-logo {
max-height: 320px;
max-width: 100%;
}
https://jsfiddle.net/anik786/9vd83rww/
Goal
My goal is to keep the image in the centre of the red background and for the image to shrink when the height of browser becomes too small.
What actually happens
Although the above code is okay for normal screen sizes; when the browser height is reduced too much, the image does not seem to shrink at all, but instead insists on keeping its same size, causing overflow.
Is this what you are looking for? https://jsfiddle.net/9vd83rww/2/
#banner-logo {
height: calc(100vh - 80px);
max-width: 100%;
}
I found several questions about but none of their solutions was working for me so here we go again.
Let's say I have this template of HTML
<html>
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</html>
The footer div should be at least 80px height, but if those 80px plus the height of all other 3 divs is not enough to fullfill the screen I want the footer to increase as much as the screen is filled with it below header, contentA and contentB.
BG-Color Solution
If you just want to let the remaining space have the same background-color as the footer (but not the body), you could add the footer bg-color to the html-tag:
html {
background-color: #footer_color;
}
body {
background-color: #body_color;
}
#footer {
min-height: 80px;
}
.
JS-Solution
If you have something more complex within your footer, you could use javascript/jquery to calculate the remaining space and set the footer to that height.
There is a similar question with a code example here: https://stackoverflow.com/a/14329340/3589841
.
Flexbox-Solution
If you only care about the latest browsers you can use the flexbox-box-model:
HTML:
<html>
<body>
<div id="flex_container">
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</div>
</body>
</html>
CSS:
html, body {
min-height: 100%;
}
#flex_container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#header {
flex: 0 1 auto;
}
#contentA {
flex: 0 1 auto;
}
#contentB {
flex: 0 1 auto;
}
#footer {
flex: 0 1 100%;
min-height: 80px;
}
I believe you're going for something like this, have a look http://jsfiddle.net/dusUK/
Using CSS, we create a class, which in this case is fullheight, and we apply the following:
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
}
We also then apply the following to html, body
html, body {
height: 100%;
min-height: 100%;
}