Archived topic
Different aspect images for Desktop/Mobile
5 replies · Started by Rene on August 11, 2017
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
Hi there,
Are those just regular images inserted in the content using the <img> tag?
Yes, exactly.
Isn't it the right way?
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>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!
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;
}
}