I am trying to build a website and I am making a collection of images that I want to be in a row with a margin of around 20 pixels (the images are in a div that is repeated for however many images there are). When I run the code the images appear in an weird configuration in that they seem to be layered. When I add 'img' to the div class the images then appear in a column which is not what I want. I have created a very simple website example with three repeated images that I want to be in a row. In previous websites I have been able to make the images appear in a row (the way I want it to be), but now this simply will not work. I will provide my code. Any help would be appreciated :).
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Updated correct CSS:
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 50px;
}
.image img {
width:100%;
height: 100%; *addition made by myself*
UPDATE
When I run the edited code and add 6 images the images do not resize. Is there a fix to this issue?
UPDATE Adding height: 100%; seems to have solved the issue. I will update the question to layout all steps in solving the problem.
Just add .image img {width:100%;}
so that the images will cover their entire parent div and won't be overlapped
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.image img {
width:100%;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Hello check if is ok ?
.image img{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Related
I have some html that should create an image up top, and an image gallery underneath.
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" alt="first dog">
<figcaption>Example Photo</figcaption>
</figure>
<div class="img-bar">
<img src="img/dog2.jpeg" alt="second dog"/>
<img src="img/dog3.jpeg" alt="third dog"/>
<img src="img/dog4.jpeg" alt="fourth dog"/>
<img src="img/dog5.jpeg" alt="fifth dog"/>
</div>
</div>
</div>
</body>
</html>
In order to style the image gallery, I've added the following styles:
.img-bar{
display: flex;
}
img {
width: 100%;
}
.img-bar img {
object-fit: cover;
width: 300px;
height: 300px;
}
All of the image files have dimensions > 300px by 300px, so I would expect them to follow the CSS rules. However, as you can see from the photo below, the second image doesn't follow the rules (it's taller than it is wide). As an fyi, the actual dimensions of that image file are 934px x 1401px.
Any help would be appreciated! Thanks.
You want to set the dimensions of your container, then have the image inside expand to fill it. I'd reshuffle it like this:
img {
width: 100%;
height: 100%;
object-fit:cover;
}
.img-bar {
display:flex;
width: 300px;
height: 300px;
}
This will of course apply to all images, so you might want to either add a class for the images inside img-bar or set the dimensions for your figure element containing the main image.
What I mean is, my image gallery (that a made using html code from a premade template that I found in the internet) is like this, all pictures have different sizes:
But with Instagram, they all look the same size:
My question is: How do I make all images have the same size? Is there a already made template somewhere?
Edit: It seems that even if pictures have different sizes, which is expected, Instagram kinda "crops" the image and shows only a portion of it to keep the same size, but not making it distorced. This is what I want...
Set a specific height and width to all the images, You can do this using CSS:
<style>
img {
height: 100px;
width: 100px;
}
</style>
This Should Help
body{
background: black;
}
.style{
float: left;
padding: 10px;
}
img {
height: 150px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
<div class="style">
<img src="https://www-konga-com-res.cloudinary.com/w_auto,f_auto,fl_lossy,dpr_auto,q_auto/media/catalog/product/B/C/150697_1617090455.jpg" alt="">
</div>
</body>
</html>
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 3 years ago.
so I am trying to create a simple image gallery using HTML and CSS, here's my code below
img{
float:left;
width: 30%;
margin: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="IMG_1.jpg">
<img src="IMG_2.jpg">
<img src="IMG_3.jpg">
<img src="IMG_4.jpg">
<img src="IMG_5.jpg">
<img src="IMG_6.jpg">
<img src="IMG_7.jpg">
<img src="IMG_8.jpg">
<img src="IMG_9.jpg">
</body>
</html>
and I should expect to get a 3*3 image grid, but here is what I got
there is HUGE whitespace at the left of the second row. when I inspect it, the blank doesn't belong to any of the images.
WHY!
Try this 100% it will work
.gallery{
display: flex;
flex-wrap: wrap;
}
img{
width: 30%;
margin: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
<img src="https://picsum.photos/536/354">
</div>
</body>
</html>
Try to use flex, rather than float.
Wrap that images inside div:
<div class="img-container">
<img src="IMG_1.jpg">
<img src="IMG_2.jpg">
...
</div>
And use this style:
.img-container {
display: flex;
flex-wrap: wrap;
}
img{
/*float:left;*/
width: 30%;
margin: 1.66%;
}
I will do set two images in inline, in the header of my website. But how I can do it?
https://imgur.com/0xnuqp5
I tried this... but (obviously) doesn't work.
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325">
Try this flexbox example:
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.image {
flex: 33.33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
</div>
</body>
</html>
<style>
.img{float:left;}
</style>
or
<style>
.img{display:inline;}
</style>
And then apply the class:
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350" class="img"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325" class="img">
I'm trying to have it so that the images show up in the in my premade box that I created. Right now, they are too wide and showing up outside my width of 50em. Also, they are pretty big height wise, and I don't know if that is just a change of the picture or the code. I'm using flexbox for this.
Right now, without the images in there, it looks like they are all on one line from using the wrap, but once the images are in, then it stops working right.
main{
width:50em;
border-style:solid;
display:flex;
}
.images{
display: flex;
flex-direction: row;
flex: 1 1 25em;
flex-wrap: wrap;
flex-grow: 1;
}
<!DOCTYPE html>
<html>
<head>
<!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
<meta charset="UTF-8">
<!-- A link to reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="flex.css">
</head>
<body>
<main class="wrapper">
<header id="images">
<img src="student-misc-02.jpg" alt="student1">
<img src="student-misc-06.jpg" alt="student1">
<img src="student-misc-08.jpg" alt="student1">
<img src="student-misc-12.jpg" alt="student1">
<img src="student-misc-19.jpg" alt="student1">
<img src="student-misc-20.jpg" alt="student1">
</header>
</main>
</body>
</html>
I've fixed the CSS code to match your HTML code. Also, in some of your edits, you showed as 3 columns, the last CSS rule try to reproduce those 3 columns layout.
main {
width: 50em;
border-style: solid;
display: flex;
}
/* fix the selector to match yout html code using id, not class */
#images {
display: flex;
flex-direction: row;
flex: 1 1 25rem;
flex-wrap: wrap;
flex-grow: 1;
}
/* If you need the three columns as your original question */
#images img {
width: 33%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<!-- A meta element naming the Unicode character set you want the browser to use (UTF-8). -->
<meta charset="UTF-8">
<!-- A link to reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="flex.css">
</head>
<body>
<main class="wrapper">
<header id="images">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
<img src="http://lorempixel.com/400/200" alt="student1">
</header>
<section class="title">
<!--<h1>XD Rountable 2019 Event Calendar</h1>-->
</section>
<footer>
</footer>
</main>
</body>
</html>