图像样式效果

Question

我有一个客户想要与WooTheme's Duo Theme 相同的图像样式效果。我可以轻松实现这个初始效果：

------HTML-------------
<div class="home-banner">

</div>

-------CSS-------------
.home-banner {
height: 500px;
background-image: url("CLIENT'S BG IMG");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 9.505em 1.618em 11.089em;
text-align: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

.home-banner:after {
content: "";
display: block;
height: 10em;
width: 200%;
position: absolute;
bottom: -5em;
right: -20em;
background: none repeat scroll 0% 0% #46535D;
border-radius: 100%;
transform: rotate(2deg);
border-top: 0.327em solid #F97960;
}

但是有一个要求是杀死整个事情。客户的照片是他们公司的工作人员。当浏览器窗口调整大小以模拟平板电脑/智能手机时，由于 css 规则，大部分图像无法看到：

background-size: cover;

如果我更改此规则，横幅效果将不再正常工作。我需要在一个小型显示器上看到所有工作人员。想象一下，一名工作人员的头在他们的移动设备上被砍掉了。这意味着我的头将是下一个。有什么建议吗？

Answer 1

您可以使用 CSS 媒体查询，例如

@media (max-width: 480px){  
/*Place mobile CSS here*/
}

这样，每当用户在移动设备上查看此 CSS 规则时，此 CSS 规则将覆盖普通浏览器...只需将其放置在普通浏览器样式之后即可。