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%;
}
Related
I’m looking to implement a full height (no-scroll) layout which contains a square image.
Depending on the available height of the container the image should scale accordingly in width.
So far I’ve attempted to implement the layout using both — floats and flexbox — but any solution (including anything responded to similar questions here) either leads to an overlap between image/container and the additional content to the right or doesn’t calculate 100% as intended (e.g. by including the height of the header).
My most recent attempt looks like this:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
background: #D8D8D8;
}
.header {
background: #FF9C9C;
padding: 5px;
}
.content {
display: flex;
height: 100%;
}
.image-container {
border: 1px solid #7100FF;
height: 100%;
}
img {
display: block;
height: 100%;
width: auto;
}
.aside {
background: #B6F0C7;
flex: 1 1 auto;
}
<div class="page">
<div class="header">
Header
</div>
<div class="content">
<div class="image-container">
<img src="http://placehold.it/100x100" alt="Card image">
</div>
<div class="aside">
<p>Other content</p>
</div>
</div>
</div>
https://jsfiddle.net/s0846ozy/
It’s been a few years since I have worked with CSS. Looking forward to having a rather obvious flaw in my approach pointed out. Thanks!
EDIT:
It seems this issue is browser-specific. I’m using the latest Firefox.
object-fit won't solve the issue as far as I can tell and is something I’ve already explored.
I’ve added a JSFiddle for easier experimentation.
Chrome (expected):
Firefox (actual):
use this:
img {
object-fit: cover;
}
for preserving the aspect-ratio!!
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>
I have a column flex container, with one flex child containing an image
<div class="flex">
<p> Test </p>
<div class="flex-item">
<img class="img" src="https://i.imgur.com/E4Os1Fh.png">
</div>
</div>
All elements are given width 100% height 100% along the chain.
html, body {
height: 100%;
}
.flex {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.flex-item {
flex: 1;
}
.img {
width: 100%;
height: 100%;
}
How come the image is not respecting the height properties and is taking up more space than the height of its parent element?
JSFiddle: https://jsfiddle.net/ohewn35k/4/
(You need to resize the window to be smaller than the natural image size to see the problem in action)
EDIT: The example in this question seems to be working fine, but it doesn't not work in my actual code. I have stripped my code down in developer tools and uploaded a zip file
https://www.mediafire.com/file/v32z4xrxnstyd3d/reproduce.7z/file
If you extract the file and open reproduce.html you'll see that the image element has a scrollbar as it's expanding passed its available space for some reason.
Once I fix this problem, I intend to add object-fit: contain to the image so it contains nicely within its available space.
Since you're using flexbox.
Your .flex-item becomes this:
.flex-item {
flex: 1;
}
Essentially you're are telling the flex item to use the maximum space available.
You can read about the flex property on MDN
Your CSS '.img' selector should just be 'img'
Try this
<div class="flex">
<div class="flex-item">
<img src="https://i.imgur.com/E4Os1Fh.png">
</div>
</div>
html, body {
height: 100%;
}
.flex {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.flex-item {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
UPDATE:
I don't know why I was downvoted, if someone could tell me what I did wrong it would be cool, If you are sure about your answer I could accept a No or yes as answer and a simple idea of how to do it.
.gallery {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.gallery img {
min-width: 33%;
max-width: 33%;
min-height: 120px;
max-height: 120px;
}
<div class="gallery">
<!--Images users provide examples:-->
<img src="https://unsplash.it/200">
<img src="https://unsplash.it/200/100">
<img src="https://unsplash.it/100/300">
<!--etc...-->
</div>
That's ok but I noticed that some images look ugly because they are horizontal images or vertical and I'm giving them a squared shape (I don't like how they look when I give them width/height auto because they all together look disordered and bad).
What I recently did was In another part of the web was to do something like:
.image-cool {
min-width: 230px;
max-width: 230px;
min-height: 280px;
max-height: 280px;
/*Has a rectangle shape*/
background: #eee;
}
.image-cool img {
max-width: 230px;
max-height: 230px;
}
<div class="image-cool">
<img src="https://unsplash.it/200">
</div>
That last code works in the next way:
If you put multiple divs with images inside all will be aligned in the screen and the images will adjust its width and height limited by their container and images don't look bad anymore.
The question here is if I could achieve the same result of the second code in the first code using CSS and without adding more HTML like a div or container.
Why would I not want another div?
Because the current HTML of the first part is essential in that way for some long scripts, Yeah I could modify it all but It will take time and I'm just asking to see if I can save some time.
Thanks a lot for your time! :)
Instead of using img tag, you can use background-image and background-size: cover on a div therefore any image size can fit into the element.
.gallery {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
}
.gallery-image {
width: 33%;
height: 120px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="gallery">
<div class="gallery-image" style="background-image:url(https://unsplash.it/100/300)"></div>
<div class="gallery-image" style="background-image:url(https://unsplash.it/200/100)"></div>
<div class="gallery-image" style="background-image:url(https://unsplash.it/200)"></div>
</div>
I'm facing a strange issue that might have link with flexbox misbehaving with max-height, but so far I didn't find any pure css solution.
I made a plunker to summarize the problem. If you resize your window to reduce its height, at some point you should have a scrollbar in the first block, but if you get back to a higher height, even if there is enough space, the scrollbar won't disappear unless you put your mouse over it (which feels very bugy) : https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p=preview
I have a main container (in flex) containing 2 blocks (also in flex).
The main container has its height set to 100%, allowing it to resize itself following the window size.
Both children have a fixed content and an overflow-y set to auto.
The first child has a max-height in % to let more height to the second child.
The issue seems to come from this max-height rule. If you remove it, then there's no problem, but I need this max-height...
I don't want to use something like:
.max { flex: 1 1 auto; }
.all { flex: 3 1 auto; }
because it would make my first block higher than its content depending on the window size. I want the first block to have at most its content height.
So my question is: Is it an implementation issue in many browsers (maybe all, but I only tested it in Chrome, IE10 and IE11), or is something wrong in my logic ?
Thank you.
UPDATE: I used a fixed height for my content in this example, but in my project it's a list of n elements in it. So I can't really set my max-height with px value.
UPDATE2: I can't use vh in .max max-height property because it takes 100vh as 100% of viewport height (basically your browser window height). But in my context, .main is already in other containers. Those containers have already their heights defined and are smaller than my window height.
/* Styles go here */
html {
height: 100%;
}
body {
height: calc(100% - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 2 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
</body>
</html>
It is a bug, in Chrome, a test in FF and Edge, it works fine.
Since you use full viewport height, change the max-height: 40%; to max-height: 40vh;.
Another way, as in below sample, is to change the 100% in height: 100% to 100vh.
I guess this works better because viewport units like vh is a fixed unit, which percent is not.
Plnkr demo: https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview
html {
height: 100vh;
}
body {
height: calc(100vh - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 1 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
Yes it feels buggy. If you increase the height of the window the height of the first box does not get updated unless:
you decrease the height again
"put your mouse over it" (did not quite get your meaning here)
IMHO this is a browser bug.
If you set flex-grow to anything greater 0 for the first box, the height gets updated correctly, if you increase the height of the window (as you would expect) But using flex-grow isn't an option as the box could potentially grow bigger than its content.
Rather than using max-height:40% you should use the exact same height as you use for .content and use flex-grow: 1 as well to circumvent the "browser bug"