The problem I'm having is that the image height will not stay in its container's boundaries.
The the max-width being applied to the image seems to work, however, the max-height doesn't.
HTML
<div class="row-layout">
<div class="artist-image">
<img >
</div>
<div class="artist-image">
<img >
</div>
<div class="artist-image">
<img >
</div>
</div>
CSS
.row-layout {
display: flex;
flex-direction: row;
width: 100%;
height: 250px;
}
.artist-image {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.artist-image > img {
max-width: 100%;
max-height: 100%;
}
Any ideas on how to fix this would be much appreciated.
NEW (CHANGED) ANSWER:
Define the images as background-images of their containers, center those and choose background-size: contain. This will always show the full image in its original proportions, fitted to the size of the container:
.x {
background: url(http://placehold.it/600x400) center center no-repeat;
background-size: contain;
}
Here's the whole thing in a codepen: http://codepen.io/anon/pen/EKzQbK
Related
I am developing an app with vue.
However, I do not want to set black and white for the background-image on one page and not to set black and white for the elements above it, but it is set automatically and the whole is changed to black and white.
Any way to fix it??
//template
<div class="blank"> //root element -> I set the background image here
<div class="container"> // I don't want to set mix-blend-mode here.
...
</div>
</div>
style
.blank {
display: flex;
justify-content: center;
height: 659px;
background: url('../../assets/images/bg_gray.png') 100%;
mix-blend-mode: luminosity;
background-size: cover;
& .container {
padding: 0 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 0;
just use this code for background cover image,always use html and body for background in css in style
html {
height: 100%;
}
body {
background: url(''../../assets/images/bg_gray.png''); 100%;
background-size: cover;
}
never use div for background cover, image will not set as full screen
The definition of mix-blend-mode on w3schools says "The mix-blend-mode property specifies how an element's content should blend with its direct parent background". So, that means you must need a parent and since you don't want to set mix-blend-mode on .container you can wrap .blank in another div .main and set its background-color:black give it same height as .blank and there you go.
.main{
height: 659px;
background-color: black;
}
.blank {
display: flex;
justify-content: center;
height: 659px;
background: url('../../assets/images/bg_gray.png') 100%;
mix-blend-mode: luminosity;
background-size: cover;
}
.container {
padding: 0 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 0;
}
<div class="main">
<div class="blank"> //root element -> I set the background image here
<div class="container"> //I don't want to set mix-blend-mode here.
...
</div>
</div>
</div>
Ok so I tried vertically aligning the text in my div. I tried all kinds of stuff. Turns out this little box is something I can't define and it is unknown and unwanted. I know that the green block is padding Anyone got a clue on this? This purple block is bugging me
.menu-intro {
position: relative;
}
.intro-img-div {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
align-content: center;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
object-fit: contain;
}
.menu-intro-img {
object-fit: contain;
position: relative;
width: 100%;
}
.menu-intro-text {
display: flex;
align-items: center;
flex-direction: column;
flex-flow: column;
height: 300px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
max-width: 50%;
overflow: hidden;
padding: 20px;
text-align: center;
}
.menu-intro-h1 {
margin: 0;
font-size: 3em;
}
.menu-intro-text p {
font-size: 1.5em;
}
<main>
<h1 class="text-centered">Our Menu</h1>
<div class="menu">
<div class="menu-intro">
<div class="intro-img-div">
<img src="style/img/menuintroimg.jpeg" alt="Background image of our food" class="menu-intro-img">
</div>
<div class="menu-intro-text">
<h1 class="menu-intro-h1">A look at <span class="red-text">Jacque's</span></h1>
<p>Scroll down and see what we have to offer!</p>
</div>
</div>
</div>
</main>
TURNS out this space is space that isn't filled out by text but is still registered as part of the div. You need to define another way of justifying content inside the div
justify-content:space-evenly;
Your menu-intro-text is a flex with explicitly defined height: 300px.
The children elements looks to take less part of that height. So the purple area is a part that is left. And Inspector shows it to you in a convenient way. Now using this hint of the Inspector you can decide what to do: add more children to fill that unutilized space or you may want to distribute it with justify-content:space-evenly as it was proposed by #Andelo Motika above or, in my opinion, better with justify-content:space-around
there is a flexbox with flex items
every flex item should be shown as a clickable folder with particular text in it
as far as I understand, the only way to achieve that via CSS is to have a background image
The problem is that I want to get the following as well:
Constraint every flex item, ideally only by the width, e.g. max-width: 20% (to show it nicely on mobile)
Let flex items automatically expand their width/height to show a complete background image (preserving the constraint above)
Unfortunately, was unable to find a right combination of params for that, so far it looks like this:
<div class="container">
<div class="column">
name1
</div>
<div class="column">
name2
</div>
</div>
.container {
height: 100vh;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.column {
max-width: 20%;
background-image: url("./ic-folder.png");
background-size: contain;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: space-around;
This doesn't achieve the goal - looks like every item is large enough just to cover nested <a> and they don't care about background there, so, they are smaller than desired.
I have an assumption that in this particular case we can hard-code the item's size as background image size, but that means that every time the background image is changed, we need to adjust the css with its new dimensions.
Is there any CSS way to force the element to grow in a way to cover its background image?
I think instead of adding the image in the background-image you can put it inside of the element. When you do this image will be clickable. Also if you use the style code that I wrote for the img you create a responsive image. If you want to control the image size you can play with its parent div with this way you can manage to control the width. So I suggest you give what width that you want to the .column and control your width and image problem.
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.column {
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
max-width: 20%;
/* background-image: url("https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg");
background-size: contain;
background-repeat: no-repeat; */
}
img {
max-width: 100%;
height: auto;
object-fit: contain;
}
#media screen and(max-width: 450px) {
.container {
flex-direction: column;
}
}
<div class="container">
<div class="column">
<a href="path1"
><img
src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
alt=""
/>name1</a
>
</div>
<div class="column">
<a href="path2"
><img
src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
alt=""
/>name2</a
>
</div>
</div>
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'm trying to center a div on a webpage using flexbox. I'm setting the following CSS properties. I see that it's being centered horizontally, but not vertically.
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
Here's the fiddle: JSFIDDLE
Can you explain what I'm doing wrong?
A <div> element without an explicit height defaults to the height of it's contents, as all block elements do. You'd probably want to set it to 100% of it's parent, the <body>, but that's not enough, since that is also a block element. So again, you need to set that to 100% height, to match it's parent, the <html>. And yet again, 100% is still required.
But once all that is done, you get that annoying vertical scroll bar. That's a result of the default margin the body has, and the way the box model is defined. You have several ways you can combat that, but the easiest is to set your margins to 0.
See corrected fiddle.
html, body {
height: 100%;
margin: 0px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
You just need to set html, body, and your flex container to height: 100%. The reason it wasn't working is that your flex container didn't have an explicit height set, so it defaulted to the height of its contents.
Live Demo:
html, body {
height: 100%;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
JSFiddle Version: http://jsfiddle.net/d4vkq3s7/3/