Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create div that contains the multiple fixed-size images
Overview
To make the images of the fixed size can be done by styling the <img> tag. We can style each <img> tag and set its width and height by its tag name, class name or id name. The only thing is that while styling we have to carefully use the “.”, “#”, “tag”. As because tag name can be directly used styled but class name and id name cannot be directly used they are written followed by “.className”, “#idName” respectively.
Approach
The main approach to attain this task is to style the <img> tag only once in the stylesheet, Stylesheet can be both internal stylesheet and external stylesheet. We can also use the width and height attribute of the img tag to make the images of fixed size, but by doing this the code will become more complex or messy.
Algorithm
Step 1 − Create a HTML boilerplate code, and create a parent div tag in it and also give the class name to it.
Step 2 − Now create a few <img> HTML tags in which it contains two attributes by default src=“ ” and alt=“ ”. Add the link of your image in the src attribute. The “src” can also contain addresses from your current working directory also.
<img src="" alt="">
Step 3 − Create the tag inside the head tag of the code
.<style> </style>
Step 4 − Now style the parent div selecting the class name of its.
.imageGallery {
display: flex;
flex-wrap: wrap;
gap: 3rem;
justify-content: center;
}
Step 5 − Select the tag and set the width and height of it. Styling the “img” tag will reflect the style for all the current images and upcoming images.
img {
width: 10rem;
height: 10rem;
border-radius: 8px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.489);
}
Example
In this example we had created three img tags, so all these <img> tags are targeted and made of fixed size by setting the width and height. So on setting the width and height of the images all the images are of equal size. We also style the parent div and made its display flex and flex-wrap property so to make a responsive page.
<html>
<head>
<title>div contains multiple images of fixed size</title>
<style>
.imageGallery {
display: flex;
flex-wrap: wrap;
gap: 3rem;
justify-content: center;
}
img {
width: 10rem;
height: 10rem;
border-radius: 8px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.489);
}
</style>
</head>
<body>
<p style="text-align: center;font-size: 5vw;text-decoration: underline;"> Fixed Size Images </p>
<div class="imageGallery">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt="pythonTraining">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1895/course_1895_image.png" alt="tableauTraining">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt="htmlCsstTraining">
</div>
</body>
</html>
In the below images, all the images are of fixed size with width size of “18rem” and height “10rem”. The size of the images are set once in the internal stylesheet in the head tag of the code.
Conclusion
The advantage to using an external stylesheet is that we can target on tag and set its width and height. So in the future it does not matter how many images are added in the parent div the size of the image will be the same as the above shown images. This type of task is used in the application of developing mobile galleries, creating a course catalog and many more. To use the inline styling is of no use in this case as it will make code more chaotic.
807 Views
