Earlier I was pointed out how to achieve a certain layout I wanted to have for my page. However, this messes with my image height. As far as I understand, height: auto; should set the height to right proportion when a certain width is set.
Here's my code:
.floatingImage {
width: 50px;
height: auto;
}
#floatingImageContainer {
background-color: red;
width: 75%;
height: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<body>
<div id = "floatingImageContainer">
<img src = "images\miniImages\1.jpg" class = "floatingImage"></img>
<img src = "images\miniImages\2.jpg" class = "floatingImage"></img>
<img src = "images\miniImages\3.jpg" class = "floatingImage"></img>
<img src = "images\miniImages\4.jpg" class = "floatingImage"></img>
<img src = "images\miniImages\5.jpg" class = "floatingImage"></img>
<img src = "images\miniImages\6.jpg" class = "floatingImage"></img>
</div>
</body>
My guess is that it's got to do with the display property or maybe the flex-wrap, but that was the solution for my last problem and I'm not entirely sure yet how it could effect my image height... haven't added a margin in the screenshot, however that wouldn't change the height.
here's a screenshot of the issue:
what the hell
Thank you in advance!
New problem:
You need to add align-items with an appropriate setting to the container for the auto height to work, for example align-items: flex-start;. Otherwise the items will be stretched to full height of the container by default:
html, body {
margin: 0;
height: 100%;
}
.floatingImage {
width: 50px;
height: auto;
}
#floatingImageContainer {
background-color: red;
width: 75%;
height: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
<div id="floatingImageContainer">
<img src="http://placehold.it/300x500" class="floatingImage">
<img src="http://placehold.it/300x200" class="floatingImage">
<img src="http://placehold.it/200x200" class="floatingImage">
<img src="http://placehold.it/300x400" class="floatingImage">
<img src="http://placehold.it/400x200" class="floatingImage">
<img src="http://placehold.it/300x350" class="floatingImage">
</div>
BTW, as mentioned in the comments: Closing </img> tags are invalid HTML - erase them...
Use
align-items: center
on the container to prevent it from stretching its children.
.floatingImage {
width: 50px;
height: auto;
}
#floatingImageContainer {
background-color: red;
width: 75%;
height: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<body>
<div id="floatingImageContainer">
<img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
<img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
<img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
<img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
<img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
<img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>
</div>
</body>
Instead of using display: flex to center the images horizontally which I am guessing was your last issue to fix, just use display: block and text-align: center. This will not mess with the images.
Also, I recommend setting image widths inside the actual <img> tag, setting the width property inside the tag and with no height will do the exact same as using CSS height: auto. I recommend this because for one it helps with arbitrary user agents(i.e. speech browsers), and relaying the correct aspect ratio for them. These will not normally be able to read the CSS. In addition, this allows the browsers to size the images even before the CSS and images resources are loaded. Not supplying, a width attribute in the image tag will cause the browser to render it as 0x0 until the browser can size.
Here is a working example:
#floatingImageContainer {
background-color: red;
width: 75%;
height: 100%;
display: block;
text-align: center
}
<div id="floatingImageContainer">
<img src="http://lorempixel.com/g/400/200/" width="50" />
<img src="http://lorempixel.com/g/400/200/" width="50" />
<img src="http://lorempixel.com/g/400/200/" width="50" />
<img src="http://lorempixel.com/g/400/200/" width="50" />
<img src="http://lorempixel.com/g/400/200/" width="50" />
<img src="http://lorempixel.com/g/400/200/" width="50" />
</div>
Related
I have a row of images that resize correctly in Firefox, but do not resize at all in Chrome. These images need to stay in a row and cannot fold under each other.
Any suggestions?
.image-rail {
display: flex;
justify-content: center;
width: 100%;
}
.image-rail img {
height: auto;
width: 100%;
}
<div class="image-rail">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>
You've set the image-rail to display:flex; So that means that the childeren inside that flex can be set with a width that creates the "columns". Your images are the direct childeren of the flexbox. So if you want 4 of them next to each other the all need to be 1/4 of the total width of the flexbox aka 25%.
(Right now you've set a 100% and if you've had used a div it would have been the whole row for each div, but as it is a image the browsers see the 100%, but the images is smaller then the whole row so it sets it to 100% as in all the pixels the image contains.)
.image-rail {
display: flex;
justify-content: center;
width: 100%;
}
.image-rail img {
height: auto;
width: 25%;
}
<div class="image-rail">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>
EDIT: Instead of using a fixed width, auto size your columns based on
the number of elements
If you want to have all the children of your flexbox to fit in one row, but you're not sure how many children there will be, then you're better of using a gridbox instead of a flexbox.
.image-rail {
display: grid;
grid-auto-flow: column;
width: 100%;
}
.image-rail img {
height: auto;
width: 100%;
}
<div class="image-rail">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
<img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>
Try this one :
.image-rail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.image-rail img {
height: auto;
width: 100%;
}
or add flex-wrap: no-wrap to .image-rail
Basically I want to center within a div tag with a class name container 4 pictures looking like a windows. Here is my code
<div class="container">
<div class = "arriba">
<img class = "pic" src="img/il00.jpg">
<img class="pic" src="img/web00.png">
</div>
<div class="abajo">
<img class="pic" src="img/logo.jpg">
<img class="pic" src="img/w.png">
</div>
</div>
here is my css
.container{
display: grid;
left: 50%;
}
img.pic{
padding: 5px;
object-fit: cover;
width: 360px;
height: 360px;
}
add this css
.container > *{ margin : auto }
or yo can see at this link https://jsfiddle.net/eq7p391a/
You can also add justify-content: center in container
DEMO
.container{
display: grid;
justify-content: center;
width:100%;
}
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.
So I am attempting to have 3 flex items with equal height and width inside a flex container. I am successful in making the 3 flex items have equal width. However, the first flex-item has a div (.images) that is also a flex container which contains a few more children than the other 2 flex items' (.images) div. This results in the height of the 1st flex-item to be larger than the other 2. How do I make the height of the other 2 flex items have the same height as the first, even though they do not have the same amount of children? I researched this issue, but I only found answers when the flex-direction property is set to column. In my case the flex-direction property is set to row within the flex container.
body {margin: 0}
.flex-container {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-items {
width: 33.333%;
height: 100%;
}
.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
justify-content: center;
}
<div class="flex-container">
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
<img src="image4.jpg" alt="">
<img src="image5.jpg" alt="">
</div>
</div>
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image6.jpg" alt="">
<img src="image7.jpg" alt="">
</div>
</div>
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image8.jpg" alt="">
<img src="image9.jpg" alt="">
</div>
</div>
</div>
You need to give the images inside .images a height of 100% and a width of auto - if you want them to scale proportionately, like so:
.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%; (images is getting 100% height, but nothing is telling its children to go up in height)
justify-content: center;
}
.images img { (address the children)
height:100%;
width:auto;
}
If you don't set images width and height they will use auto, and scale it from that for the flex box depending on what browser your on of course.
Images can be manipulated inline or using css by using the height or width property, an example of both is below.
Inline Example 1:
<img src="#.png" width="auto" height="100%" />
Css Example 2:
div.images > img {
height: 100%;
width: auto;
}
It is also good idea to optimize images for your web page and not to rely on auto scaling for the best results. After all you are the one that knows what the end result should be.
:)
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.