I have a very simple HTML / CSS image grid. All photos are different and are inside a <figure> tag. When the images are in jpg file format, when refreshing the page sometimes some of them are repeated or appear distorted, with another ghost image on top or dissappear. This only happens with jpg, not png. Why is this? Is there a solution?
ul { padding: 0; margin: 0; }
figure { margin: 0; }
.grid-item {
float: left;
width: 33%;
}
.tm-img {
max-width: 320px;
width: 100%;
height: auto;
border: none;
margin: 0 auto;
}
.grid-item figure {
position: relative;
overflow: hidden;
text-align: center;
}
.grid-item figure img {
display: block;
max-width: 100%;
}
<ul>
<li>
<div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/01.jpg" alt="Image 01" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/02.jpg" alt="Image 02" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/03.jpg" alt="Image 03" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/04.jpg" alt="Image 04" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/05.jpg" alt="Image 05" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/06.jpg" alt="Image 06" class="tm-img">
</figure>
</div>
</div>
</li>
</ul>
Image repeated
Image disappeared
This is the sample netlify html page
Animation
Refreshing the page multiple times shows the issue.
Related
I am trying to create a responsive image gallery for my website using a flexbox. However, I am trying to make it wrap to the next line and stay in order, which I am having trouble with. For example:
Desktop
1,2,3
4,5,6 etc
Tablet
1,2
3,4 etc
Mobile
1
2 etc
Please see the example code I included.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 33%;
max-width: 33%;
}
.column img {
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<div class="row">
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/42.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/22.png">
<figcaption>Caption 2</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/52.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/32.png">
<figcaption>Caption 3</figcaption>
</figure>
<figure>
<img src="https://img.webnots.com/2014/04/62.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
The first thing I would do is nest it in a container. Flex works in order of the markup so I switched your order back to the correct numerical order. Then, what I would do is nest each of your figure's in their own div. I just used your column div to demonstrate. Then remove the media queries and let flex do its thing.
The main issue was you were trying to split them up in rows of 3 but had 2 nested per div, and were trying to set max-width to the div. To have a row of 3 they should be nested in their own div's with width: 33%;
EDIT ~ I made the min-width: 200px;because your image renders at about 160px. 200px would be a good breaking point on mobile devices. Check your dev tools for mobile.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
min-width: 200px;
width: 33.33%;
}
.container {
margin: auto;
width: 100%;
}
<div class="container">
<div class="row">
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/42.png">
<figcaption>Caption 2</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/22.png">
<figcaption>Caption 3</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/52.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/32.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="column">
<figure>
<img src="https://img.webnots.com/2014/04/62.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
</div>
Your HTML elements are set up incorrectly. To achieve what you want, you shouldn't put in the same element "first" and "fourth". While it looks good on desktop, you won't be able to put element "second" or "third" between them. You will only be able to change the position of those elements inside of the . Very basic HTML and CSS stuff.
I would advise you to rename class "column" to "cell" and put them in order:
<div class="row">
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 2</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 3</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 4</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 5</figcaption>
</figure>
</div>
<div class="cell">
<figure>
<img src="https://img.webnots.com/2014/04/112.png">
<figcaption>Caption 6</figcaption>
</figure>
</div>
</div>
And of course in your CSS file change the .column to .cell
This way you will achieve your wanted responsive look on tablet and mobile.
I am looking to put a figcaption onto an image and not have it move the image from its original spot without the figcaption`. Here is my CSS for figcaption.
Here is my code for an image with a figcaption.
figcaption {
text-align: center;
display: inline-block;
}
<figure>
<a href="https://ibb.co/CbSzPRr">
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</a>
<br>
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
Here is also a screenshot of what it looks like. The image on the left is where the image should be. The image on the left has a figcaption and it's slightly up to the left.
I am very new to coding. Anything suggestions would help. Thank you! I think there is a really simple solution to this that I'm missing.
Are you looking for something like this -
figure {
display: block;
float: left;
width: 200px;
margin: 20px
}
figcaption {
display: block;
text-align: center;
width: 100%;
}
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>The image stays in same row without begin displaced</div>
</figcaption>
</figure>
The above code will display all images in single row and all the captions beneath them. The images won't be misaligned in a single row.
Another way of doing it would be to bring the captions over the image. This can be done as -
.row {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-X: scroll;
}
figure {
display: block;
float: left;
position: relative;
margin: 30px 15px
}
figcaption {
position: absolute;
bottom: 0;
background: #fff;
opacity: .7;
width: 100%;
text-align: center;
}
.row-separator {
height: 5px;
background-color: grey;
margin: 20px 10px;
}
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
<div class="row-separator"></div>
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
Hope this helps !
I'm trying to learn a bit more CSS/HTML to customize xaringan slides and could use some help.
I would like to place a number of GIF's in an image grid like the one shown here into a xaringan slide.
I know that normally one can display two images side-by-side by either using .pull-left[] & .pull-right[] or by defining sections with custom CSS like this:
.left-code {
color: #777;
width: 38%;
height: 92%;
float: left;
}
.right-plot {
width: 60%;
float: right;
padding-left: 1%;
}
Then one would put the images in a xaringan slide with R code like this:
.pull-left[
<img src=figure1.jpg>
]
.pull-right[
<img src=figure2.jpg>
]
For an image grid the custom CSS would be:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
However, it also includes HTML code that specifies all of the images so I'm not quite sure how to integrate the two in a xaringan slide.
<div class="row">
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
You can do this using the extension theme here.
This theme is included the later version of xaringan so you can specify in the YAML by css: "ninjutsu". The layout should look like below:
---
title: "Split to grid in `xaringan`"
output:
xaringan::moon_reader:
css: ["ninjutsu"]
---
class: split-four
.column[
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
]
.column[
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
]
.column[
other images
]
.column[
other images
]
I want the images to be centered and I need two of the images to be stacked up on each other in the center. I have logo on the left and nav bar on the right
.projImg {
margin: 0;
}
.projImg img {
display: block;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>
.projImg {
margin: 0;
}
.projImg img {
display: block;
margin: auto;
}
use this CSS code to centralize your images.
Use following code...
.projImg {
text-align:center;
width: 50%;
float:left;
margin:0;
}
.projImg img {
display: inline-block;
width: 100%;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>
I have 3 images
HTML:
<img src="cal.png" alt = "calendar" class="info">
<img src="location.png" alt = "location" class="info">
<img src="time.png" alt = "clock" class="info">
CSS:
.info{
height: 15%;
align-content: center;
padding-left: 20%;
}
Now, I want to add text under the 3 images, the text should be centered. It will be 3 different . The 3 images should be on one line.
Please try this code:
Html:
<div class="div-test">
<img src="invoice_logo.png" alt = "calendar" class="info">
<div >YOUR TEXT</div>
</div>
css:
.info{
height: 15%;
align-content: center;
}
.div-test{text-align:center;}
.div-test > span {clear:both;}
From your class remove margin left.If not required then.
You can use the figcaption tag, which is meant for this exact purpose:
div figure {
display: inline-block;
}
.info {
height: 15%;
text-align: center;
}
<div>
<figure>
<img src="http://via.placeholder.com/150x150" alt="calendar" class="info">
<figcaption class="info">Info about image one.</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/150x150" alt="location" class="info">
<figcaption class="info">Info about image two.</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/150x150" alt="clock" class="info">
<figcaption class="info">Info about image three.</figcaption>
</figure>
</div>
Your HTML:
<div class="img-with-text">
<img src="yourimage.png" alt="sometext" />
<p>Some text</p>
</div>
Your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
https://stackoverflow.com/a/1225242/6441416
https://stackoverflow.com/users/7173/jason