[Resolved] Different aspect images for Desktop/Mobile

[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
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

[Leo]

Hi there,

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

[Rene]

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

[Leo]

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>

[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!

[Leo]

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;
    }
}

[Author]

Posts