The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> IMG CENTER
halim12
post Aug 15 2023, 08:14 AM
Post #1





Group: Members
Posts: 3
Joined: 15-August 23
Member No.: 29,022
I set many images at the page, center them ... but when it is displayed on different screens with different resultions, it gets horrible !!!

Also not all pictures are displayed at the page, some only and others hidden as you see. unsure.gif Attached ImageAttached File  po.html_css_code.txt ( 2.1k ) Number of downloads: 83


help me!! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
coothead
post Aug 15 2023, 04:34 PM
Post #2


Advanced Member
****

Group: Members
Posts: 207
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there halim12,

the following code will work well on all platforms...

HTML
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Image Gallery</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Image Gallery</h1>

<div id="image-container">

  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A16.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A11.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A12.jpg" alt="">

  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A8.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A17.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A7.jpg" alt="">

  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A5.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A6.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A10.jpg" alt="">

  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A13.jpg"alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A1.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A9.jpg" alt="">

  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A2.jpg" alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A15.jpg"alt="">
  <img src="https://dummyimage.com/400x400/d90000/fff.jpg&text=A4.jpg" alt="">

</div>

</body>
</html>



screen.css
CODE

body {
   background-color: #000;
   font: normal 1em / 1.5  sans-serif;
}
h1 {
   font-size: 1.5em;
   font-weight: normal;
   color: #fff;
   text-align: center;
}
#image-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.5%;
   width: 90%;
   padding:0 0.5% 0.5%;
   margin: 1em auto;
   background-color: #fff;
}
#image-container img{
  width: 33%;
  height: auto;
  margin: 0.5% 0 0;
}


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
halim12   IMG CENTER   Aug 15 2023, 08:14 AM
Christian J   I set many images at the page, center them ... D...   Aug 15 2023, 12:01 PM
coothead   Hi there halim12, the following code will work we...   Aug 15 2023, 04:34 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 11th June 2024 - 03:01 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC