Printable Version of Topic

Posted by: A. D. Ingram Mar 2 2015, 12:42 AM

I am only one element away from being able to give my website some actual definition.

I have built a layout that runs almost entirely on % Sizing to account for Browser Window adjustments and screen resolutions.

I have a pre-built photo gallery that I have nicely integrated into my website's layout. The Thumbnail frame is just fine as it is.
However, I'd like to get the div that contains the full (large) image to be equally responsive to the Browser Window/ Screen Resolution in %.

Right now I'm stuck with a very static window. I have attempted to adjust the CSS information to % and moved some things around, but I can't seem to locate whatever controls the size.

my webpage:

For the Specific Page with the problem:
http://www.alienatedillusions.com/SLAVE_GALLERY_00.html

To view the Full Page:
http://www.alienatedillusions.com/PAGE_GALLERY.html

Posted by: pandy Mar 2 2015, 10:51 AM

I don't understand. Do you mean you want the actual image size to adopt?

Posted by: A. D. Ingram Mar 3 2015, 01:13 AM

What I'm trying to do is contain the Large-Sized image within the borders of the DIV that it is parented to.


I have looked into the code inside the JavaScript, CSS, and HTML and the only thing that makes any sense is that somehow there is NO size control on the images. The image itself is set to 500px x 500px. So, in full screen it looks great. However, on a website that's coordinated to resize based on browser window and screen resolution, this fixed size is very limited and looks bad in high resolution, while the browser is shrunk, cannot view the whole image.




I have tried to locate any trace of CSS or HTML that might help contain the image within the DIV.
(Ultimately, I'd prefer not to have to reduce the resolution of my images, AND I'd like to fill as much of the DIV as I can with the image.

I found this in the HTML -- However, height and width are not allowed within <a>.

<li>
<a class="thumb" name="leaf" href="DIR_IMAGE/SUBDIR_GALLERY/GALLERY_00/IMG_001.jpg" title="Title #0"><!-- FULL SIZE -->
<img src="DIR_IMAGE/SUBDIR_GALLERY/GALLERY_00/_THUMBS/IMG_001_THUMB.jpg" alt="Title #0"/><!-- THUMBNAIL -->

Posted by: pandy Mar 3 2015, 07:44 PM

I take that as you want the image to resize.

Try this.

Posted by: A. D. Ingram Mar 5 2015, 04:39 PM

It was that simple?
Now I feel stupid.

div.slideshow img {vertical-align: middle;border: 1px solid #ccc; width:100%;}

I just needed to add the 100% to this line of code. Now it looks like I'm all set, thanks!