IMG CENTER |
IMG CENTER |
halim12 |
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. po.html_css_code.txt ( 2.1k ) Number of downloads: 82 help me!! |
Christian J |
Aug 15 2023, 12:01 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
I set many images at the page, center them ... Do you really want all those images in one long row? 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.
po.html_css_code.txt ( 2.1k )
Number of downloads: 82 Maybe some of them are positioned outside the viewport? That may happen when using large positioning offset values. |
coothead |
Aug 15 2023, 04:34 PM
Post
#3
|
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 |
Lo-Fi Version | Time is now: 4th June 2024 - 10:50 PM |