Adjusting Images in HTML

Question

Adjusting Images in HTML

I'm struggling to display 4 images on a single page in the desired sequence, similar to the example below: https://i.sstatic.net/3V1Ru.png

Currently, my code only aligns the images to the left-hand side. Here is a snippet of my code:

<style>
img {
    max-width: 100%;
    max-height: 100%;
}

<div class="4_page" style='height: 50%; width: 25%;text-align: center; object-fit: contain'>
    <img src="hebahan New material.png">
</div>


<div class="4_page" style='height: 50%; width: 25%;text-align: center; object-fit: contain'>
    <img src="logo_test.png">
</div>

<div class="4_page" style='height: 50%; width: 25%;text-align: center; object-fit: contain'>
    <img src="logo_test.png">
</div>

<div class="4_page" style='height: 50%; width: 25%;text-align: center; object-fit: contain'>
    <img src="logo_test.png">
</div>

</style>

I would appreciate any guidance on how to resolve this issue. Thank you.

html css image

Answer 1

Answer №1

Make sure to keep the <div> tag outside of the <style></style> tags. See if this resolves your issue. Alternatively, you can structure it like so using a table instead --

The primary index.html file:

<!DOCTYPE html>
<html>
   <head>
      <title>YourTitle</title>
      <link rel ="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--For responsiveness-->
   </head>

   <body>
      <table class="img-cont"> <!-- Images will be arranged based on specified height. Always enclose table in a <div> when displaying additional information. --> 
         <tr>
             <th><img src="hebahan New material.png"></th>
             <th><img src="logo_test.png"></th>
         </tr>

         <tr>
             <th><img src="logo_test.png"></th>
             <th><img src="logo_test.png"></th>
         </tr>
      </table>
   </body>
</html>

In my external style.css, I have:

.img-cont {
   width:100%;
   height:100%; /* Set height to 100% only if showing images exclusively */
}

img {
   max-width:100%; /* Adjust as needed */
   max-height:100%;
}

This streamlined approach reduces code and boosts performance. Please mark this as the solution if successful. 🙂🙂

Answer 2

Make sure to keep the <div> tag outside of the <style></style> tags. See if this resolves your issue. Alternatively, you can structure it like so using a table instead --

The primary index.html file:

<!DOCTYPE html>
<html>
   <head>
      <title>YourTitle</title>
      <link rel ="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--For responsiveness-->
   </head>

   <body>
      <table class="img-cont"> <!-- Images will be arranged based on specified height. Always enclose table in a <div> when displaying additional information. --> 
         <tr>
             <th><img src="hebahan New material.png"></th>
             <th><img src="logo_test.png"></th>
         </tr>

         <tr>
             <th><img src="logo_test.png"></th>
             <th><img src="logo_test.png"></th>
         </tr>
      </table>
   </body>
</html>

In my external style.css, I have:

.img-cont {
   width:100%;
   height:100%; /* Set height to 100% only if showing images exclusively */
}

img {
   max-width:100%; /* Adjust as needed */
   max-height:100%;
}

This streamlined approach reduces code and boosts performance. Please mark this as the solution if successful. 🙂🙂

Answer 3

Answer №2

Consider utilizing CSS instead of inline styling for better organization.
Avoid starting class names with a number for compatibility reasons.
Modify the height according to your specific needs and design requirements.

.col-25{
border:2px solid yellow;
display:inline-block;
height: 400px;
width: 49%;
box-sizing:border-box;
text-align:center;
margin-bottom: 10px;
}

<div class="col-25">
    <img src="hebahan New material.png">
</div>


<div class="col-25" >
    <img src="logo_test.png">
</div>

<div class="col-25" >
    <img src="logo_test.png">
</div>

<div class="col-25" >
    <img src="logo_test.png">
</div>

Answer 4

Consider utilizing CSS instead of inline styling for better organization.
Avoid starting class names with a number for compatibility reasons.
Modify the height according to your specific needs and design requirements.

.col-25{
border:2px solid yellow;
display:inline-block;
height: 400px;
width: 49%;
box-sizing:border-box;
text-align:center;
margin-bottom: 10px;
}

<div class="col-25">
    <img src="hebahan New material.png">
</div>


<div class="col-25" >
    <img src="logo_test.png">
</div>

<div class="col-25" >
    <img src="logo_test.png">
</div>

<div class="col-25" >
    <img src="logo_test.png">
</div>

Adjusting Images in HTML

Answer №1

Answer №2

Similar questions

Numerous toggles available for the mobile version

Consecutive pair of JavaScript date picker functions

Adjust the arc angle on the canvas

Add Your Logo to the Navigation Bar using CSS

Are there any jQuery plugins available that can display a loader image while a page is loading?

Unable to interpret the JSON reply from the server

Show a div pulsating while simultaneously animating another div

Incorporating user input into a div element

What is the best way to serialize data from non-form elements and make it easily accessible through params[:model]?

Imitate the act of pasting content into a Textarea using JavaScript

CSS3 Animation for Marquee Image

Press the Concealed Button Enclosed in a div Using Selenium with Python

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

Tips for showing an image in a pop-up window using Window.open

How to send parameters to the jQuery delete button click event handler

What is the method for emphasizing links in the navigation bar with Bootstrap 3?

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

The Send.php script is missing the input fields for Name and Email

What is the best way to centrally position a <mat-card> on the screen using Angular 9?

Is there a way in CSS to apply multiple colors to individual letters within a word?