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.
Related
this is my code for my portfolio page and the links for my first row of images do not seem to be working
this screenshot shows which images links are not working
the CSS for this is here, so not too sure what i have done wrong
Check your folder structure first. Maybe that is the problem. Also, please write the code in your questions. It's easier for us to see the problem you are facing.
Added note
It's better in your case to make the parent element, div gallery, a grid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
margin: 20px;
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
text-align: center;
}
.gallery img {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<div class="gallery">
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
</div>
</body>
</html>
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 am using the Bootstrap grid system to organise objects because I need to ensure the site is mobile-friendly. All objects adjust well to the resolution of the screen except for 1 gif.
On full resolution screen, the gif is 500x500 pixels and is perfectly sized to fit with the rest of the screen. However, on mobile (all devices), it remains 500x500, even when this makes it larger than the screen. Interestingly, on iPad pro (not other iPad) it assumes a width of 102.4 pixels, retaining height of 500.
All other items adjust perfectly and stay inside the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<link
href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html {
max-height: 100%;
max-width: 100%;
}
.logo {
color: #000000;
box-sizing: border-box;
object-fit: cover;
max-width: 10vw;
overflow: hidden;
}
#media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
max-width: 700px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 name">
<p>text</p>
</div>
<div class="col-sm-5 logo">
<img src="./cubegif.gif" class="image.fluid" alt="logo">
</div>
</div>
</div>
</body>
</html>
I am considering if the predefined size of the .gif is overriding whatever I am doing, but that does not explain the change on ipad pro.
I managed to find an answer! Posted below n case anyone else finds this thread and has the same problem:
in the HTML img tag, I gave it the following class:
<img class="fixed-ratio-resize" src="./cubegif.gif" alt="logo">
and added the following CSS:
`.fixed-ratio-resize {
max-width: 100%;
height: auto;
width: auto\9;
}`
I found this solution on http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design
Many thanks for all contributions!
Some quotation marks were missing in your code?
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-7 title">
<p>text text text text</p>
</div>
<div class="col-xs-5 logo">
</div>
</div>
</div>
</body>
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>