How to create a div that contains multiple fixed-size images ?
What is a <div> tag ?
A <div> tag can be defined as a divider of two blocks of HTML code. It is used as a container for HTML elements which can then be styled with CSS or Javascript. Class or id attribute can be used to easily style the element in the <div> tag.
Please read more about <div> tag from this article : https://www.geeksforgeeks.org/div-tag-html/
An example on how to use a <div> tag:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.firstDiv {
border: 5px outset black;
background-color: green;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "firstDiv" >
< h2 >Hello Geek!</ h2 >
< p >How was your day like?</ p >
</ div >
</ body >
</ html >
|
Output:
Create a <div> that contains multiple fixed size images:
Approach:
- First, create the <div> tag as mentioned in the previous example and insert multiple images inside a common <div> tag so that all the images have a separate <div> tag and a class name.
- The following example shows how to make a <div> tag that contains multiple fixed-size images:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.images {
display: flex;
flex-wrap: wrap;
margin: 0 50px;
padding: 30px;
}
.photo {
max-width: 31.333%;
padding: 0 10px;
height: 240px;
}
.photo img {
width: 100%;
height: 100%;
}
</ style >
</ head >
< body >
< div class = "images" >
< div class = "photo" >
< img src = "tom1.jpg" alt = "photo" />
</ div >
< div class = "photo" >
< img src = "tom2.jpg" alt = "photo" />
</ div >
< div class = "photo" >
< img src = "tom3.jpg" alt = "photo" />
</ div >
</ div >
</ body >
</ html >
|
Explanation: In the above code, we have created a main container <div> class of “images” which is used to store all the images and each image has its own container <div> class of “photo” which can be later used to add special CSS properties to the images.
Output:
Images shown are contained in <div> tag of class=”images”
Last Updated :
14 Jan, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...