The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Changing a photo gallery from px to %
A. D. Ingram
post Mar 2 2015, 12:42 AM
Post #1





Group: Members
Posts: 7
Joined: 8-February 15
Member No.: 22,167



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:
huh.gif http://www.alienatedillusions.com/SLAVE_GALLERY_00.html

To view the Full Page:
http://www.alienatedillusions.com/PAGE_GALLERY.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2015, 10:51 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,186
Joined: 9-August 06
Member No.: 6



I don't understand. Do you mean you want the actual image size to adopt?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
A. D. Ingram
post Mar 3 2015, 01:13 AM
Post #3





Group: Members
Posts: 7
Joined: 8-February 15
Member No.: 22,167



QUOTE(pandy @ Mar 2 2015, 10:51 AM) *

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


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.

IPB 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 -->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2015, 07:44 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,186
Joined: 9-August 06
Member No.: 6



I take that as you want the image to resize.

Try this.

CODE
.image-wrapper img   { width: 100% }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
A. D. Ingram
post Mar 5 2015, 04:39 PM
Post #5





Group: Members
Posts: 7
Joined: 8-February 15
Member No.: 22,167



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2019 - 04:15 AM