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>
Related
I have an effect on my website, and it only works within a 16:9 aspect ratio. This means I need to keep it within that aspect ratio. I wanted to make a box that was vertically and horizontally centered which could resize proportionally to contain the effect. I looked up many tutorials and guides on flex resizing, but i still cant get it to work properly. The padding in the that contains the box is lopsided, and it doesnt align properly either. It scrolls horizontally even though im using 100vh/vw?? Does 100% of the viewport's height really mean what it says?
I'm really not sure what to do...
Codepen example of my code below:
https://codepen.io/Ktashi/pen/KKeOJey
html
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
css
body {
padding: 0;
margin: 0;
}
.flex-align {
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.aspect-ratio-box {
height: auto;
aspect-ratio: 16/9;
background: red;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 94vw;
max-height: 94vw;
max-width: 94vw;
}
I tried changing the flex-grow: property's value, along with flex-shrink: and flex-basis: but that didn't help much. I'm very stuck as I've only really been coding with html and css for about a year off and on.
You can use the CSS media query to test whether the item will fit within the parent which has 100vw/100vh dimensions.
This snippet is just to give the idea.
It does a couple of things - makes the parent's padding be part of its dimensions by setting box-sizing border-box and sets the height or width as % of the parent dimensions.
.aspect-ratio-box {
aspect-ratio: 16/9;
background: red;
}
#media (max-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
width: 94%;
}
}
#media (min-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
height: 94%;
}
}
body {
padding: 0;
margin: 0;
background: black;
}
.flex-align {
background: blue;
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
I'm trying to show an image in a "lightbox" style so that it will fill the available area on screen, in this case 90% of the width of the page and 70% of the height.
Using object-fit: contain; seems to be the de facto way to do that but it's not quite working with border-radius. Is it possible to use object-fit on an <img> and still have the border radius applied as intended?
You'll need to resize your browser window to see what happens when you run the below snippet. I've got the same code running in JSFiddle, as per the below video.
div {
margin: auto;
width: 90vw;
height: 70vh;
background-color: DeepSkyBlue;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50px;
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
Contain isn't really helping here.
Instead, set the max width and height of the img to 100%. The system will fit it in either totally top to bottom or side to side, but the img element will have whatever dimensions it needs so the border radius will work on it OK.
To center the img, if that is what you want, you can display: flex the parent div and justify/align items to the center.
div {
margin: auto auto;
width: 90vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
background-color: DeepSkyBlue;
}
img {
max-width: 100%;
max-height: 100%;
border-radius: 50px;
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
As commented, setting max-width and max-height seems to be what you need or expect:
div {
margin: auto;
width: 90vw;
height: 70vh;
display:grid;
background-color: DeepSkyBlue;
}
img {
max-width: 100%;
max-height: 100%;
margin:auto;/* x,y center if inside a grid or flex box */
object-fit: contain;/* useless by now, img should keep its ratio */
border-radius: 50px;
border-radius: calc( 5vw + 5vh); /* will scale, maybe you find this usefull */
background-color: Crimson;
}
<div>
<img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>
Use object-fit: cover; instead of contain
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>
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}