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">
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 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>
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>