I need to make six images the same size, but everything I've done isn't working and so I'm here searching for help.
Here is my HTML
<div>
<h1>Finest Images</h1>
<img src="img/arch.jpg" alt="Arch">
<img src="img/lake.jpg" alt="Lake">
<img src="img/landscape.jpg" alt="Landscape">
<img src="img/perfect.jpg" alt="Perfect">
<img src="img/treesnwater.jpg" alt="TreesnWater">
<img src="img/walk.jpg" alt="Walk">
</div>
CodePudding user response:
Suppose your html looks like this
<div>
<img >
<img >
<img >
<img >
<img >
<img >
</div>
then you can add style in css as
.imgClass1, .imgClass2, .imgClass3, .imgClass4, .imgClass5, .imgClass6 {
width: 100px;
height: 100px;
}
CodePudding user response:
You have multiple ways to do these. One way would be use css. For example:
<div>
<img src="folder/pic.jpg">
<img src="folder/subfolder/pic.jpg">
</div>
And the css will look like:
div img {
height: 100px;
width: 100px;
}
You can add inline styles to the elements, too.
<img style="height: 100px; width: 100px;" src="folder/pic.jpg">
<img style="height: 100px; width: 100px;" src="folder/subfolder/pic.jpg">
CodePudding user response:
You can just add styles inline in HTML:
<div>
<h1>Finest Images</h1>
<img style="width:100px; height:100px;" src="img/arch.jpg" alt="Arch">
<img style="width:100px; height:100px;" src="img/lake.jpg" alt="Lake">
<img style="width:100px; height:100px;" src="img/landscape.jpg" alt="Landscape">
<img style="width:100px; height:100px;" src="img/perfect.jpg" alt="Perfect">
<img style="width:100px; height:100px;" src="img/treesnwater.jpg" alt="TreesnWater">
<img style="width:100px; height:100px;" src="img/walk.jpg" alt="Walk">
</div>
CodePudding user response:
img {
max-width: 100%;
max-height: auto;
position: relative;
vertical-align: middle;
left: 50%;
transform: translate(-50%);
height: 150px;
width: 150px;
object-fit:cover;
}
div {
width: 20%;
height: auto;
min-height: 100%;
overflow: hidden;
position: relative;
display: inline-block;
}
<div>
<img src=""> Text(1)
</div>
<div>
<img src=""> Text(2)
</div>
<div>
<img src=""> Text(3)
</div>
<div>
<img src=""> Text(4)
</div>
<div>
<img src=""> Text(5)
</div>
<div>
<div>
<img src=""> Text(6)
</div>
<div>
CodePudding user response:
Also you can use from flex:
<div >
<div>
<img src="folder/img1">
</div>
<div>
<img src="folder/img2">
</div>
<div>
<img src="folder/img3">
</div>
<div>
<img src="folder/img4">
</div>
<div>
<img src="folder/img5">
</div>
<div>
<img src="folder/img6">
</div>
</div>
css:
If you want to images sorted in the page width:
.container{
display: flex;
justify-content: space-between;//or justify-content: center;
}
.container div{
width: 150px;
height: 150px;
}
img{
width: 100%;
height: 100%;
}
Otherwise, if you want to images placed below each other:
.container{
display: flex;
flex-direction: column;
}
.
.
CodePudding user response:
This solution might work for the issue that you're facing.
Add a class to the div element, then add CSS using parent class.
.sequence-img img {
height: 200px;
width: 200px;
object-fit: cover;
}
<div >
<h1>Finest Images</h1>
<img src="http://via.placeholder.com/640x360" alt="Arch">
<img src="https://dummyimage.com/lrgrec" alt="Lake">
<img src="https://dummyimage.com/16:9x1080/" alt="Landscape">
<img src="https://user-images.githubusercontent.com/13071055/45196982-c7bd6100-b213-11e8-90c9-8c9cdee8717f.png" alt="Perfect">
<img src="https://dummyimage.com/lrgrec" alt="TreesnWater">
<img src="https://dummyimage.com/16:9x1080/" alt="Walk">
</div>
CodePudding user response:
You could add this css code to your HTML
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}
<div>
<h1>Finest Images</h1>
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">
</div>