我想弄清楚为什么我的英雄图像消失时，我在纵向模式的物理设备上。奇怪的是，当我使用chrome的开发工具的设备模拟器时，它显示得非常好和响应。
如果我从.image-wrapper img中移除height: auto;，那么我的英雄图像将出现在我的物理设备的移动视图中，但它不会在所有设备上响应。我真的需要height: auto;，它可以在所有设备上响应。
我能做什么来解决这个问题?
CSS和HTML:
@media (max-width: 600px) {
.image-wrapper {
background-image: url("https://mario.nintendo.com/static/70f0ba342c3bb756ced4ba67505a1e08/d31fb/character.png");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.image-wrapper img {
opacity: 0;
pointer-events: none;
width: 100%;
display: block;
height: auto;
}
}<a href="#">
<div class="image-wrapper">
<img width="375" height="570"/>
</div>
</a>为600px以下的设备添加@media screen是没有意义的，因为图像宽度小于600px
你所需要的只是在HTML代码中添加图像源，你不需要为这个
添加任何CSS样式。<a href="#">
<div class="image-wrapper">
<img src="https://mario.nintendo.com/static/70f0ba342c3bb756ced4ba67505a1e08/d31fb/character.png" width="375" height="570"/>
</div>
</a>
回答你的问题了吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
@media (max-width: 600px) {
.container img{
width: 300px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://mario.nintendo.com/static/70f0ba342c3bb756ced4ba67505a1e08/d31fb/character.png" width="375" height="570" alt="Character Image">
</div>
</div>
</body>
</html>只有在CSS宽度小于等于600px的情况下才能添加图片作为背景如果宽度大于600px则没有图片因为你的CSS:))))
您可以将图像添加为<img src="your img url" />或者您可以指定媒体之外的背景图像