Sat, 2016-04-02 00:17
I have a container which is to house images. I want the images to wrap around like tiles to a max width or 1200PX.
My images are 200PX wide. So if my screen can 6 it will but if not i want my container to snap to the nearest 200PX.
How can I do this?
Sat, 2016-04-02 04:14
#1
Looking in the wrong direction
I don't think there are any backward compatible or mobile solutions for the direction you're trying to go. You can, though, cause the number of columns to 'snap'.
Try this solution:
<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[*/ html, body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0 1.5em; padding: 0;} p { font-size: 1em;} #page { border: 1px dotted gray; margin: 0 auto; width: 90%;} #gallery { margin: 0 auto; max-width: 1280px} #gallery ul { margin: 0; padding: 0; text-align: center;} #gallery li { border: 1px solid black; display: inline-block; list-style: none; margin-bottom: .3em;} #gallery img { vertical-align: bottom; width: 200px;} /*]]>*/ </style> </head> <body> <div id="page"> <h1> Variable width gallery </h1> <div id="gallery"> <h2> The images </h2> <ul> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> <li> <img alt="" src="test-image.gif"> </li> </ul> </div> <!-- gallery --> </div> <!-- page --> </body> </html>
This small demo doesn't require any specific css to be device responsive, but do test anyway.
Note: The attached test image is 300×300px.
Edit: Changed first sentence to read 'backward compatible'. ~gt
cheers,
gary
| Attachment | Size |
|---|---|
| test-image.gif | 462 bytes |
Sat, 2016-04-02 07:14
#2
That works well. Thank
That works well. Thank you.
Can I place a DIV over my image with a opacity of 0.7? I know how to create this div just not overlay it on the image like this?
Sat, 2016-04-02 08:24
#3
kiwis wrote: Can I place a
Can I place a DIV over my image with a opacity of 0.7? I know how to create this div just not overlay it on the image like this?
For what purpose?
My first inclination would be to control the image's opacity. For example:
#gallery li { background-color: black; border: 1px solid black; display: inline-block; list-style: none; margin-bottom: .3em;} #gallery img { opacity: 0.3; vertical-align: bottom; width: 200px;} #gallery img:hover { opacity: 1.0;}
The LI's background color is declared because the default is transparent, which might allow another, uncontrolled, color to shine through.
cheers,
gary
Sat, 2016-04-02 21:50
#4
Sorry I should have said, I
Sorry I should have said, I want the DIV to be half the height and to contain text.
Sun, 2016-04-03 07:55
#5
Another try
#gallery li { background-color: black; border: 1px solid black; display: inline-block; list-style: none; margin-bottom: .3em; position: relative;} #gallery img { vertical-align: bottom; width: 200px;} #gallery img:hover {} #gallery li p { background-color: white; height: 50%; margin: 0; opacity: 0.7; position: absolute; width: 200px; left: 0; bottom: 0;}
And, a snippet of html:
<ul> <li> <img alt="" src="test-image.gif"> <p> This is text overlay </p> </li> ... </ul>
cheers,
gary