5 replies [Last post]
gary4u
gary4u's picture
Offline
Regular
India
Last seen: 6 weeks 4 days ago
India
Timezone: GMT+5.5
Joined: 2018-12-31
Posts: 15
Points: 23

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.

http://mytrade.myconnect.in/

Thank you

Gary
INDIA

mod edit: [code] ... [/code] tags added ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 12 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary4u
gary4u's picture
Offline
Regular
India
Last seen: 6 weeks 4 days ago
India
Timezone: GMT+5.5
Joined: 2018-12-31
Posts: 15
Points: 23

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.

http://mytrade.myconnect.in/

Thanks
Gary

gary4u
gary4u's picture
Offline
Regular
India
Last seen: 6 weeks 4 days ago
India
Timezone: GMT+5.5
Joined: 2018-12-31
Posts: 15
Points: 23

Regard gallery display -size to fit in the same size box.

Sorry posted the wrong url- this is the one -

http://myart.myconnect.in/

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 12 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

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

AttachmentSize
khakicanvas-orig.gif 572 bytes
khakicanvas-tnail.png 285 bytes
wheatcanvas-orig.gif 572 bytes
wheatcanvas-tnail.png 286 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary4u
gary4u's picture
Offline
Regular
India
Last seen: 6 weeks 4 days ago
India
Timezone: GMT+5.5
Joined: 2018-12-31
Posts: 15
Points: 23

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