I'm doing some flex-grid and having problems getting inline images to scale their dimensions to match the height of a flex-grown box.
I have a flexbox column where I have a title and a wrapper that will grow to whatever space is leftover. Inside the wrapper is list of images that I would like to all have the same height and be inline. No matter what I do the images end up to the right of the title and outside the dimensions of the flexbox. Any help would be appreciated. Bad drawing included on what I would like vs what I currently get
Link to fiddle: https://jsfiddle.net/oan5fmtb/1/
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
<img src="..." class="img">
...
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.imgs {
flex: 1;
/* Not sure if I need anything else here */
}
.img {
display: inline;
/* Not sure what to do */
}
Please try this,
.container {height: 170px;width: 100%;border: 1px solid black;}
.imgs {display: flex;}
.img{width:60px;height:60px;margin-right: 10px;}
It works as expected
Found the solution thanks to this answer.
<div class="container">
<h4>Title</h4>
<div class="imgs">
<img src="..." class="img">
<img src="..." class="img">
</div>
</div>
.container {
height: 170px;
width: 100%;
display: flex;
flex-direction: column;
border: 1px solid black;
}
.imgs {
flex: 1;
min-height: 0;
border: 1px solid red;
}
.img {
height: 100%;
width: auto;
}
I found out that a flex item cannot shrink smaller than the size of their content, min-height: 0 will fix this.
Related
I'm trying to create a series of flexboxes with an image and text beneath. I'd like all the image heights to align, however, all the source images are of different sizes.
I searched around here and found this to be essentially the same issue, but the solution doesn't seem to work for me.
Here's what I have:
CSS:
.roster {
display: flex;
flex-wrap: wrap;
}
.roster-card {
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px #888;
width: 100%;
}
.roster-card img {
width: 100%;
height: auto;
}
.roster-card-content {
display: flex;
flex-direction: column;
width: 100%;
padding: 1.4em;
}
HTML:
<div class="roster">
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p>Link</p>
</div>
</div>
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p>Link</p>
</div>
</div>
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p>Link</p>
</div>
</div>
</div>
Media Queries (if it matters):
#media all and (min-width: 40em) {
.roster-card {width: calc(30% - 10px);}
.roster-card p, .roster-card p a {font-size: 0.9em; line-height: 120%;}
}
You want to have equals height for each of your images ?
Well you write height : auto so the height is the normal height of the image. You should define a height for exemple : height: 200px.
At the moment your image is deform cause you define a width AND a height, you should know use object-fit : contain or object-fit : cover to keep proportion
I am trying to create a simple element consisting of 3 columns, the 3. column being an icon-image.
I want the element to be responsive, but the icon-image should always have the same size (e.g. 40x40 px).
So, the 1. and 2. column should have % values, the 3. column should have width 40px. I don't want the icon-image to resize on smaller screens. The icon should always have width 40px.
.container {
width: 80%;
}
.text1 {
float: left;
width: 30%;
}
.text2 {
float: left;
width: 50%;
}
.image {
float: right;
width: 120px;
}
<div class="container">
<p class="text1">Some Titel</p>
<h3 class="text2">Some Text and some more text...</h3>
<img src="image1.jpeg" alt="" class="image" />
</div>
https://jsfiddle.net/mkrizanek/usfmk6r7
Kind regards,
Milan
I have tweaked a little bit with HTML and CSS. But I hope you will get the logic. I have changed the display-type of container to flex. You can change the with of elements inside container as per your requirements.
.container {
background-color: #DDDDDD;
width: 80%;
display: flex;
}
.text {
background-color: #BBBBBB;
width: 50%;
}
.heading {
background-color: #999999;
width: 50%;
}
img {
max-width: 120px;
max-height: 120px;
}
<div class="container">
<p class="text">Some Text</p>
<h3 class="heading">Heading</h3>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="image" />
</div>
Your best option is probably to use flex.
Set "display: flex; justify-content: space-between" on the container div, and "flex: 1;" on each section that you want responsive.
If you want the text in the second div to push all the way to the image, you can also add "text-align: right;" to it.
.container {
display: flex;
justify-content: space-between;
}
.text1 {
flex: 1;
}
.text2 {
flex: 1;
}
.image {
width: 40px;
height: 40px;
background: #088;
}
<div class="container">
<p class="text1">Some Title</p>
<h3 class="text2">Some Text and some more text...</h3>
<img alt="" class="image" />
</div>
Here is a good resource for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
I'm trying to have 1 image on the top with 2 images below it spanning half the width of the image on top. The problem I'm encountering are aligning issues with the 2 images in which they don't fit nicely below the top image but spaced perfectly to the sides. I'm trying to have the 2 images be below the top image perfectly aligned in the center with no spaces below. As I shrink the window, that is when it looks like I want it to on a full screen except without the spaces. I also want them perfectly aligned in the center of the screen.
https://jsfiddle.net/voryuja8/
.first {
display: flex;
}
.first img {
margin: auto;
max-width: 800px;
}
.second {
display: flex;
}
.second img {
margin: auto;
flex: 1;
max-width: 400px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
Just remove margin:auto from the images and use justify-content: center in the flex containers.
.first {
display: flex;
justify-content: center;
}
.first img {
max-width: 800px;
}
.second {
display: flex;
justify-content: center;
}
.second img {
flex: 1;
max-width: 400px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
This might be a bit better, as it doesn't rely on setting pixel values for anything: https://jsfiddle.net/voryuja8/1/
HTML:
<div class="second">
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
</div>
CSS:
img {
max-width: 100%;
}
.second {
display: flex;
}
.flex-child {
flex-grow: 1;
flex-shrink: 1;
}
I've had difficulty figuring out how to cleanly do precicely what I am asking in the title.
Say for example I have a something like this:
<div class="image-row">
<img src="image1">
<img src="image2">
<img src="image3">
<img src="image4">
<img src="image5">
</div>
I have seen answers to similar questions, but they don't deal with the issue of spreading mixed width elements across a responsive parent element.
In something like Photoshop, this is called "Distribute horizontal centers". Here is an example I made in photoshop (500px wide image-row):
here are the same boxes when image-row is stretched to 900px wide:
Note that the gaps between the images are not necessary even, the the spread is even based on the horizontal centers of the objects.
How can I accomplish this basic idea in css?
You may use text-align:justify and a pseudo for older browser or use the display:flex properties for latest browsers.
.image-row {
width: 500px;
border: solid;
margin: 1em auto;
}
img {
vertical-align: top;
}
.justify {
font-size: 0.01px;
text-align: justify;
}
.justify:after {
content: '';
display: inline-block;
width: 99%;
vertical-align: top;
height: 0;
}
.space-between {
display: flex;
justify-content: space-between
}
<div class="image-row justify">
<img src="http://lorempixel.com/120/50">
<img src="http://lorempixel.com/50/50">
<img src="http://lorempixel.com/80/50">
<img src="http://lorempixel.com/70/50">
<img src="http://lorempixel.com/30/50">
</div>
<div class="image-row space-between">
<img src="http://lorempixel.com/75/50">
<img src="http://lorempixel.com/30/50">
<img src="http://lorempixel.com/100/50">
<img src="http://lorempixel.com/50/50">
<img src="http://lorempixel.com/80/50">
</div>
Try this:
html
<div class="table">
<div class="image-row">
<div><img src="image1"></div>
<div><img src="image2"></div>
<div><img src="image3"></div>
<div><img src="image4"></div>
<div><img src="image5"></div>
</div>
</div>
css
.table{
display: table;
width: 100%;
}
.image_row {
diplay:table-row;
}
.image_row div {
display: table-cell;
text-align: center; /* if you want to be centered */
}
.image_row div img {
display:block;
max-width: 100%;
}
You can use a flex display and set justify-content to space-between. You can do that on your image-row class:
.image-row {
display: flex;
justify-content: space-between;
}
The point is to use this class on the container div.
I have a container with a variable number of elements in it.
The elements should be justified but with a fix space between (e.g. 20px).
That means the width of every element has to adapt.
For example this:
HTML
<div class="container">
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
</div>
CSS
div.container {
text-align: justify;
}
div.container div {
display: inline-block;
margin-right: 20px;
}
div.container div img {
width: 100%;
}
At the end it should look like this (this picture shows two examples: 2 elements and 3 elements; the width is dynamic but the space fix [20px]):
It should work with a different number of child elements.
Is there a professional way to do this with CSS?
EDIT: I should mention that this fix space is a %-value!
If using Flexbox is an option, you could add flex: 1 to the flex items and also a margin property with a fixed value as follows:
EXAMPLE HERE
div.container { display: flex; }
div.container div {
height: 50px; /* Just for demo */
flex: 1;
margin-left: 20px;
}
div.container :first-child { margin-left: 0; }
Actually, flex: 1 is a shorthand of flex-grow: 1; in this case.
You can use display: table and display: table-cell for this:
.container {
display: table;
width: 100%;
border-spacing: 10px 0;
border-collapse: separate;
background: palevioletred;
}
.container div {
display: table-cell;
}
.container img {
display: block;
width: 100%;
height: auto;
}
<div class="container">
<div><img src="//dummyimage.com/200x100/000/CCC"></div>
<div><img src="//dummyimage.com/300x100/000/CCC"></div>
<div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
<div><img src="//dummyimage.com/200x100/000/CCC"></div>
<div><img src="//dummyimage.com/400x100/000/CCC"></div>
</div>
<hr/>
<div class="container">
<div><img src="//dummyimage.com/600x100/000/CCC"></div>
</div>