[Resolved] Different aspect images for Desktop/Mobile

Home Forums Support Different aspect images for Desktop/Mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #364119
    Rene

    Hi!
    I would like to show in a page an image aspect 3:4 (Vertical) for desktop, but for mobile I would like to see it like 4:3 (horizontal).
    Here’s the example horizontal-vertical cropped views
    https://drive.google.com/file/d/0B4esLC7_pf6cdzhMclgySXIyNTA/view?usp=sharing

    I’ve tried with scrset, but current mobile devices have similar resolutions than desktops.
    So, how can I manage for showing a different image in mobiles?

    Can anyone help me.
    Sorry if it’s a silly question, I’m a newbie and I didn’t find the answer in Internet…

    Thanks

    GP Premium 1.4.1
    #364143
    Leo
    Staff
    Customer Support

    Hi there,

    Are those just regular images inserted in the content using the <img> tag?

    #364152
    Rene

    Yes, exactly.
    Isn’t it the right way?

    #364201
    Leo
    Staff
    Customer Support

    Nope just wondering what kind of image we are talking about here.

    I would try scaling and cropping the images using WordPress edit media then do this:

    <div class="hide-on-mobile">
        <img src="DESKTOP IMAGE URL">
    </div>
    <div class="hide-on-desktop hide-on-tablet">
        <img src="MOBILE IMAGE URL">
    </div>
    #364211
    Rene

    Yes, I thought about that solution too, but I didn’t want to use it because it means to download the 2 images in mobile devices for just using one.

    I was looking for a “cleaner” way.
    Anyway, it was also very helpful cause I didn’t know if it were an obvious way and I didn’t realize.

    Thnx, guys!

    #364223
    Leo
    Staff
    Customer Support

    You could also do something like this:

    <div class="custom-image-size">
        <img src="IMAGE URL HERE">
    </div>

    Then add some CSS like this:

    @media (max-width: 768px) {
        .custom-image-size img {
            max-width: 400px;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.