[英]css image swap mobile vs desktop using media query
First of all thank you to all who have added their input. 首先,感谢所有添加了输入的人。 We are very close to having a solution!!!
我们非常接近解决方案!!! We duplicated the whole div and just removed the parallax-content for the second div and replaced show-on-desktop with show-on-mobile in the second div.
我们复制了整个div,只是删除了第二个div的视差内容,然后在第二个div中将“桌面展示”替换为“移动展示”。
Unfortunately the mobile version isn't displaying the mobile version. 不幸的是,移动版本没有显示移动版本。
Here is the style sheet 这是样式表
.show-on-desktop {
/* display can be inline-block, just choose one that suits your need*/
display: block;
/* it's your call what the break point is */
@media screen and (max-width: 1440px) {
display: none;
}
}
.show-on-mobile {
/* display can be inline-block, just choose one that suits your need*/
display: none;
/* it's your call what the break point is */
@media screen and (max-width: 411px) {
display: block;
}
}
Here is the updated code with the divs displayed 这是显示div的更新代码
<div class="show-on-desktop bg-img parallax-content" style="background-image: url(img/home-desktop.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375); background-position: 0px 199.4px;" data-stellar-background-ratio="0.5"></div>
<div class="show-on-mobile bg-img" style="background-image: url('img/home-mobile.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');"></div>
here is the original post 这是原始帖子
I have a client who is running a bootstrap framework theme that has parallax sections on the page. 我有一个正在运行引导程序框架主题的客户端,该主题在页面上具有视差部分。 These sections look fantastic on a laptop or tablet, however on mobile phones, it just grabs the top left corner of a large image.
这些部分在笔记本电脑或平板电脑上看起来很棒,但是在手机上,它只是抓住大图像的左上角。
I suggested to the client that we write a PHP detection script on the server that identifies the device as either Mobile or not and then swap the image in PHP, so that the image looks optimal on a phone. 我向客户端建议,我们在服务器上编写一个PHP检测脚本,以将该设备标识为“移动”或“不移动”,然后在PHP中交换图像,以使图像在手机上看起来最佳。
However it got me thinking that there's got to be a way to do it in CSS. 但是让我想到必须有一种在CSS中实现它的方法。 I'm not that familiar with mobile CSS and so I thought this might be an interesting post for our community.
我对移动CSS不太熟悉,所以我认为这对我们社区可能是一个有趣的帖子。
Here's the one line of code that displays the image. 这是显示图像的一行代码。
<div class="bg-img full-height parallax-content" style="background-image: url('img/image-name.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');" data-stellar-background-ratio="0.5"></div>
what I'm looking for is that IF its mobile instead of showing image-name.jpg it will show instead image-mobile.jpg (a different file ) that is sized correctly for mobile. 我要寻找的是,如果它的移动设备不显示image-name.jpg,它将显示适合移动设备大小的image-mobile.jpg(一个不同的文件)。
again, this could be done in PHP but there should be a way to do this in either CS or JS. 同样,这可以在PHP中完成,但是应该有一种方法可以在CS或JS中完成。 Any ideas?
有任何想法吗? Thanks in advance.
提前致谢。
That is what media queries are for. 那就是媒体查询的目的。
@media only screen and (min-width: 601px) {
.bg-img {
background-image: url('img/image-name.jpg');
}
}
@media only screen and (max-width: 600px) {
.bg-img {
background-image: url('img/image-mobile.jpg');
}
}
This can be done easily using media query in CSS 使用CSS中的媒体查询可以轻松完成此操作
.show-on-desktop { /* display can be inline-block, just choose one that suits your need*/ display: block; /* it's your call what the break point is */ @media screen and (max-width: 1440px) { display: none; } } .show-on-mobile { /* display can be inline-block, just choose one that suits your need*/ display: none; /* it's your call what the break point is */ @media screen and (max-width: 411px) { display: block; } }
<div class="show-on-desktop" style="background-image: url('img-desktop.jpg');" data-stellar-background-ratio="0.5"></div> <div class="show-on-mobile" style="background-image: url('img-mobile.jpg');" data-stellar-background-ratio="0.5"></div>
There are multiple ways to target this problem. 有多种方法可以解决此问题。 media queries will be the most reliable one.
媒体查询将是最可靠的查询。
But you can also try using the picture tag of html5 like: 但是您也可以尝试使用html5的图片标签,例如:
<picture>
<source
media="(min-width: 650px)"
srcset="images/img1.png">
<source
media="(min-width: 465px)"
srcset="images/img2.png">
<img src="images/img-default.png"
alt="">
</picture>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.