The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> 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: 73


help me!! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 15 2023, 12:01 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(halim12 @ Aug 15 2023, 03:14 PM) *

I set many images at the page, center them ...

Do you really want all those images in one long row? unsure.gif

QUOTE
when it is displayed on different screens with different resultions, it gets horrible !!!

Because of the different resolutions you can't rely on pixel units (and it's safest to avoid the "position" property in general). Some alternatives are shown here: https://www.w3.org/Style/Examples/007/center.html

QUOTE
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: 73

Maybe some of them are positioned outside the viewport? That may happen when using large positioning offset values.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Aug 15 2023, 04:34 PM
Post #3


Advanced Member
****

Group: Members
Posts: 206
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
« 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: Standard · Switch to: Linear+ · Switch to: Outline

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

- Lo-Fi Version Time is now: 27th April 2024 - 10:06 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC