Question

CSS如何设置不同屏幕宽度时某个DIV容器里显示不同的图片？

如图，当屏幕宽度小于768px时，显示右图的图片，且根据屏幕的宽度按图片比例自动缩放，保持图片比例始终正常。当屏幕宽度大于768px时，显示左图的图片，且始终保持图片比例正常，根据屏幕宽度自动缩放。那么请问CSS该如何编写呢？

Answer 1

中间这句话，必须要

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style rel="stylesheet">

@media (max-width: 768px){

.hello{

}小余768

@media(min-width:769px){

}大于768

</style>

图片的话写个宽度，高度自动。如果是背景图的话，就不一样

追问

谢谢回答。您的例子是直接设置的背景色 ，用background-color。
可是我想设置的是图片，要怎么写呢？

追答

你把background-color换成background-image就好了啊，引入图片应该会吧~~我用背景色只是给你看而已。你到时候设置图片的属性就可以了
不过个人建议，最好不用背景图，同一个区域放两张图

css
@media (min-width:768px){
.a{ width:100%; }
.b{ display:none; }
}这个是a显示100%，b隐藏

Answer 2

html:
<img class="one" src="/01.jpg">
<img class="two" src="/02.jpg">
css:

@media (min-width:768px){
.one{ width:100%; }
.two{ display:none; }
}
@media (max-width:768px){
.one{ display:none; }
.two{ width:100%; }
}