Mon, 2019-02-04 14:04
Hi,
Earlier I had posted for a CSS help for Regarding Gallery images for desktop & mobile ( http://mytrade.myconnect.in/ )and got help with CSS below
<style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #wrapper { margin: 0 auto; max-width: 65em; } h1 { font-family: serif; margin-bottom: 0; text-align: center; } /* end boilerplate */ ul#gallery { list-style-type: none; padding: 0; text-align: center; } #gallery li { display: inline-block; width: 15em; } figure { margin: 0; } #gallery img { width: 90%; } /*]]>*/ </style>
Now I am looking for the same CSS to be included as when multiple image/s/ is upload no matter what size the the display box should be the same size padding all around. Any help on this.
Thank you
Gary
INDIA
mod edit: [code] ... [/code] tags added ~gt
Mon, 2019-02-04 15:26
#1
Not sure if this is what you
Not sure if this is what you mean, but it should give you a base to work from.
#gallery li { border: 1px solid black; display: inline-block; margin: .5em; padding: 1em; vertical-align: top; width: 15em; } #gallery img { width: 100%; }
g
Mon, 2019-02-04 15:40
#2
Regard gallery display -size to fit in the same size box.
Hi,
Thank you for your response.
I am looking for if any uploaded images to the site of any size to fit in the same size box.
Eg:
If the all box size is - w-100px & h-150px then any size image should fit in the same box.
and also Need to be viewed in mobile also. Portrait & Landsacpe.
Thanks
Gary
Mon, 2019-02-04 16:16
#3
Regard gallery display -size to fit in the same size box.
Sorry posted the wrong url- this is the one -
If the box size is - w-100px & h-150px or w-200px , h-200px - then any size image uploaded should fit in the same box.
and also Need to be viewed in mobile also. Portrait & Landsacpe.
Tue, 2019-02-05 03:33
#4
Try this
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #wrapper { margin: 0 auto; max-width: 65em; } h1 { font-family: serif; margin-bottom: 0; text-align: center; } /* end boilerplate */ pre { margin-bottom: 0; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <h1> Fitting an Image to a Box size </h1> <p> We begin with the original web images. I've created two colored canvases, one portrait orientation, the other landscape. Next we resize them. I use <a href="https://imagemagick.org/">ImageMagick</a>. If you don't have it, you should get it. </p> <p> Resizing can be as simple as: </p> <pre> gt@lavern:~/IM-examples$ convert khakicanvas-orig.gif -resize\ 150x150 khakicanvas-tnail.png </pre> <p> The back slash (\) indicates a continuation on the same line. </p> <p> Note that by resizing into a square, the maximum width of a landscape image will be 150 and the maximum height of a portrait orientation will be 150. </p> </div> </body> </html>
Sorry about posting as a web page. I was authoring this as an introduction to making thumbnails. :shrug: Just lazy I guess.
g
| Attachment | Size |
|---|---|
| khakicanvas-orig.gif | 572 bytes |
| khakicanvas-tnail.png | 285 bytes |
| wheatcanvas-orig.gif | 572 bytes |
| wheatcanvas-tnail.png | 286 bytes |
Tue, 2019-02-05 14:00
#5
Regard gallery display -size to fit in the same size box.
Hi,
The code works just fine. But it will be nice if the display looks like this-( https://www.yessy.com/rukshanahooda/sale.html ) all the rows and colums are even in line.
And when I upload a image of different size it should scale & fit in the colum box.
I have added your code to - http://myart.myconnect.in/
Thanks
Gary.J.Saunders
India