0

I have my website in this situation: the thumbs of my gallery are ok when I change orientation to landscape, if the width is longer than the height. in a few words, if the thumb has a landscape shape, I can rotate the screen and the image fit it perfectly. Instead, for portrait pictures, height longer than width, it fits only if I use the mobile screen normally, in portrait mode. But if I rotate the screen, the height do not fit the screen completely and I see only a part of the image. I wish, instead, that the height is 100% and the width automatically adapt to it. This is my page to fix

http://www.paolobergomi.it/new-gallery/indoor-portraits/

My css code for all the mobile devices is the following one

    @media only screen and (min-device-width: 20px)  and (max-device-width: 991px)
    .responsive1 {

       width: 100%;
        height: auto;
      border-bottom: 1px solid #fff;

    }

)

I tried to use (orientation: landscape) but it does not work., When i rotate the screen nothing changes, and the height still not fit the screen at 100% of it. Any tips to sort this out is well appreciated ;) Thans a lot. Paolo

Paolo Bergomi
  • 27
  • 1
  • 9
  • Can you do something with media query orientation and set the height to 100% and width to auto? ... https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – Daniel Jul 29 '15 at 22:59
  • that is the issue: i tried but it does not work. thanks anyway – Paolo Bergomi Jul 30 '15 at 08:12

1 Answers1

0

Try adding the css properties mnax-height/width. If possible put the image in a div. It seems like something similar to a problem I answered some time back.

Child with max-height: 100% overflows parent

The inherit property value gets the height and width of the parent through the "computed styles"

@media only screen and (min-device-width: 20px)  and (max-device-width: 991px)
    .responsive1 {
       max-width: inherit;
       max-height: inherit;
       border-bottom: 1px solid #fff;

    }

)

I looked on your page and changing the screen to small did not effect the image

Looking in your source code I see two comments that are odd. Change to <!-- comments -->.

<!—Logo e pulsante per barra ridimensionata -->
<!—Elementi della barra -->

Next I see the entry for "Vinny". The title attribute has double quotes that break the string.

title="Vinny,  studio meetup, "50hz Photography" Dublin, May 2015"

After changing these errors I did set a width of 100% to the image and it adapted to the screen. Unfortunately my monitor does not rotate ... ;-)

Community
  • 1
  • 1
Daniel
  • 4,816
  • 3
  • 27
  • 31
  • Hi, I tried to fix with your idea but it does not work,. i did not put the image inside a div, yet, but i can. anyway i am surprised that dont work the max-height: 100 % solution – Paolo Bergomi Jul 30 '15 at 20:27
  • I am not so familiar with the CSS behavior on rotation between landscape and portrait. One thing that pops up is to set up a fixed div box that stretches the screen. i have added the CSS for it. Somehow that behavior of the image should be contained .. ;-) – Daniel Jul 30 '15 at 22:09
  • I am not sure where we are going with this. I just looked at the link in your Q and on the phone it looks great in both orientations. Drop the idea of the containing div. I was looking at your source and see some stuff with comments. see updates .. – Daniel Jul 30 '15 at 22:31
  • Hi, there is not any chance to make the picture that are longer in height adapted to the screen when rotate the mobile. I am looking at the same model of flickr..e.g.anyway thanks for the effort. i appreciated – Paolo Bergomi Aug 01 '15 at 17:56
  • When I look on the phone and view in landscape, I do not see the whole picture but it does fill the screen. All I have to do is scroll some. But just to say, I like it. It feels clean ... I would not worry about it. Good luck on the photography. They's realy nice shots ;-) – Daniel Aug 02 '15 at 18:27
  • Thanks. I will leave like this;) happy that you like my pics, Daniel – Paolo Bergomi Aug 05 '15 at 20:24