I have this grid of images. I want no spacing in between. Also the width should be 100% of parent. Each column same size, in this case 20%. The flex takes care of that. However I want the height to main aspect ratio, but that is where the problem is. The height of the images stays constant as I zoom in and out (or resize window). It needs to be same aspect ratio as the current width of the image.
Does anyone know how to fix this?
HTML
<div class="image-grid-container">
<div class="image-grid">
<img src="images/me/img01.png" />
<img src="images/me/img02.png" />
<img src="images/me/img03.png" />
<img src="images/me/img04.png" />
<img src="images/me/img05.png" />
</div>
<div class="image-grid">
<img src="images/me/img06.png" />
<img src="images/me/img07.png" />
<img src="images/me/img08.png" />
<img src="images/me/img09.png" />
<img src="images/me/img10.png" />
</div>
<div class="image-grid">
<img src="images/me/img11.png" />
<img src="images/me/img12.png" />
<img src="images/me/img13.png" />
<img src="images/me/img14.png" />
<img src="images/me/img15.png" />
</div>
</div>
CSS
.image-grid-container .image-grid {
display:flex;
}
.image-grid-container .image-grid img {
width:100%;
}
You should set each image inside div.
Something like this:
<div class="img">
<img src="http://placehold.it/200x200" />
</div>
And then in CSS
.image-grid-container .image-grid .img img {
width: 100%;
}
Full example here: https://jsfiddle.net/cvru2yL5/
Related
following various online tutorials, I'm trying to make an image gallery which just simply displays square cropped images. It appears to work on the second and third row, but for what ever reason not on the first row? Does anyone know what I might be doing wrong?
.article {
border: 1px solid red;
max-width: 1000px;
}
.gallery {
border: 1px solid blue;
display: flex;
flex-wrap: wrap;
}
.gallery-item {
border: 1px solid red;
flex-basis: 49%;
}
.gallery-item:before {
content: "";
float: left;
padding-top: 100%;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class='article'>
<h1>
title titile title
</h1>
<div class='gallery'>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/500x750' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x500' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/300x300' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x750' />
</div>
<div class='gallery-item'>
<img class='gallery-img' src='https://via.placeholder.com/750x750' />
</div>
</div>
</div>
Codepen:
https://codepen.io/pandalism/pen/XWdyJbz
Any direction at all would be great thanks!
The problem is with the 500x750 image. According to the cover documentation:
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
You've basically enforced a minimum height using gallery-item:before, but the only dimension that's actually determined is width; if the item has height>width, it will cause the gallery-item to expand. When you put the 500x750 image in any row, you'll see that it expands vertically.
I'd recommend styling the gallery-item to be a square per this answer. Once you have a maximum height enforced, contain should work like you want it to.
YOU CAN USE THIS CODE OF HTML IF YOU ONLY WANT TO DISPLAY SQUARE SIZE IMAGES
<html>
<head>
</head>
<div class='article'>
<h1>
title titile title
</h1>
<div class='gallery'>
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/500x750' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x500' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/300x300' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x750' />
<img class='gallery-img' width=25% height=50% src='https://via.placeholder.com/750x750' />
</div>
</html>
I am going to arrange images
This is html code
<div class="imagearea">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>
css code
<style>
.imagearea{
width:100%;
position:absolute;
}
.subimg{
width:200px;
height:auto;
float:left;
}
</style>
I am going to arrange images
When the images change the line, sub images of next line is arranged to image (that the height is the smallest ) of top image.
you can check it in http://jsbin.com/ezoyag/1/edit
But if I have set the height style of subimg class statis size (ex height:200px) and then I can see the good result.
And I'd like to set the height style auto.
For it I have to use only html and css
From what i understand, you want the images to not have a fixed height, but you want every line to be aligned to the highest image.
To do that you need to add a wrapper div around each image group:
<div class="imagearea">
<div class="row">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
</div>
<div class="row">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>
...
</div>
And add to the css:
.row{
float: left;
width: 100%;
}
See this fiddle
Update
when setting the height to auto, you are telling the image to scale the height according to width, so it will maintain aspect ratio, the browser controls it, and the image might appear shorter than you expect.
You can try using max-width:100% and remove the height instead, look here: http://jsfiddle.net/Kuy48/1/ , there is not other way that i can think of, to do what you want unless you set a fixed height
I have three images inside a div that scale according to window size. The div has a width of 60% and is floated left
<div id="display">
<img src="assets/images/angle1.jpg" style="width:35%;height:35%;" />
<img src="assets/images/angle2.jpg" style="width:35%;height:35;" />
<img src="assets/images/angle3.jpg" style="width:60%;height:100%;" />
</div>
Basically I want to maintain this scalability with the images arranged like this:
IMG SETUP http://brycekirk.ca/assets/images/setup.gif
Use nested DIVs to keep the right-side images together:
<div id="display">
<div id="column1" style="width:35%; float:left">
<img src="assets/images/angle1.jpg" /><br/><img src="assets/images/angle2.jpg" />
</div>
<div id="column2" style="width:60%; float:left">
<img src="assets/images/angle3.jpg" />
</div>
</div>
<div id="div1">
<img id="img1" src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<div style="float:none;clear:both;"></div>
</div>
img { float:left; width:150px; height:100px; }
#div1 { overflow:hidden; width:200px; height:100px; }
I have 3 images and, as you can guess, the second one doesn't fit fully at the right. Instead of being drawn partially, it draws from the new line (but since overflow: hidden we don't see it).
So, how can I force the second image to be drawn to the right of the first image, instead of being drawn from the new line?
Try using img{display:inline} instead of float. Or you can embed them in ul and li and float them.
Done it like that:
<div id="div2">
<div id="div1">
<img id="img1" src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<div style="float:none;clear:both;"></div>
</div>
</div>
img{float:left;width:150px;height:100px; }
#div1{width:450px;height:100px;}
#div2{width:200px;height:100px;}
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>