Skip to content
Related Articles

Related Articles

How to create a div that contains multiple fixed-size images ?
  • Difficulty Level : Expert
  • Last Updated : 14 Jan, 2021

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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”

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :