Image Resizing Affecting Image Resolution

[comedowntous]

Hello —

I understand that Lay Theme is built to be compatible with all types of screen sizes and so images resize according to different screen sizes -

I'm working on a website for a photographer and I would like for the images to become smaller as the screen resolution becomes smaller - but not to increase beyond the original image size.

The images are becoming distorted as the page widens and the images become stretched.

Thanks

[arminunruh]

Hm that shouldn't happen. Can you give me a link?

[comedowntous]

I sent the link + login via chat.

I went on to do the following, added the following custom css to the desktop version:

img {
max-width:850px;
}

This css rule ensures that images do not exceed the width of 850px, however portrait images with a different orientation appear to be larger, they continue to increase in width and appear to float outside of the parent element. In my 2 column grid I have single portrait images, landscape oriented images and portrait images side by side, the portrait images which are placed side by side appear to float outside of the parent element.

Also, the larger the resolution the more off center the images appear to be.

I tried adding a specific class to portrait-oriented images in the gridder and then to create a css rule for that class - but this method did not seem to work.

How would I be able to center the page as it appeared originally? And is it possible to add specific classes to specific images within the gridder ?

[arminunruh]

Hey!
You probably don't want your images to become too big on a big screen right?
You can try:

#main-region{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

The problem with your approach is that the images might not become larger than 850px, but the grid's size is still in % that's why the images get placed weirdly.

[nyktophobie]

hey,
first of all. thank you for making this. its such a great tool!

now my question to add on this thread.
how can i set a max width for the whole page including menu and title?
the code above only influents the body-content.

i think there should be a way to limitate the total width, cause on 27" screen for example, you have to use huge images that cost a lot of time to load if they should not be pixelated.

thanks!

[comedowntous]

Great - Thanks! I tested this on different screen resolutions and it works great!

Nyktophobie - I believe that #main-region is the div where all page elements sit; site title, menu and content and so I believe you would be able to use this to set max-width for the entire page. Armin - am I correct? Let's play by ear..

If you would like to test how your page would appear on different screen sizes you can use this online tool [http://quirktools.com/screenfly/] the largest preset size is 24" so you would have to manually enter the dimensions for 27" screen.

I was also concerned about the loading speed of the website - any tips on how to optimize speed?

Thanks again!

[arminunruh]

@comedowntous said:

I was also concerned about the loading speed of the website - any tips on how to optimize speed?

Not sure how to speed up the website more. You can try to use the wp super cache plugin, maybe that helps?

[arminunruh]

@nyktophobie said:

now my question to add on this thread.
how can i set a max width for the whole page including menu and title?
the code above only influents the body-content.

i think there should be a way to limitate the total width, cause on 27" screen for example, you have to use huge images that cost a lot of time to load if they should not be pixelated.

Cool, i'm glad that you like lay theme!
Theres no way to set the max width for the menu and title :(
The total width of the page content is limited with the css i posted above.

[nyktophobie]

thank you anyway. i´ll find a solution :)