我有一个网站:http://www.mammothnewyork.com/主要由画廊组成。
我有一些纵向格式的图像(例如,如果您向下滚动到“Andela”画廊)。
在桌面上:
我希望它们在桌面上左对齐。即左侧有图像,右侧有黑色。您可以在我的测试服务器上查看“Andela”部分 http://45.55.217.186/ .然而,这种方法在移动设备上变得一团糟。
在手机上:
我希望它们居中。就像在当前网站上一样,http://www.mammothnewyork.com/ .但是,这种方法不会在桌面上将它们左对齐。
我在 Photoshop 中手动将上述两个站点上的图像放在黑色上以演示我的要求。否则原始图像本身就是没有黑色背景的。
我已经修改过:
背景:url(img/andela/Andela-01.jpg) no-repeat center center;
使用 no-repeat left center
但它不能解决我在桌面和移动设备上的问题。
我当前用于 Andela 的 Flexbox slider 和该图像的 CSS 是:
<section id="andela" class="gallery section wait">
<div class="container">
<h2 class="title lighttext">Andela</h2>
</div>
<div id="galleryandela" class="slides-wrap fill">
<div class="slides">
<div class="slide">
<span class="img" style="background: url(img/andela/Andela-01.jpg) no-repeat center center; background-size: cover;"></span>
<p class="lighttext" style="top:4%;"></p>
</div>
....
....
.... <!-- TRUNCATED HTML FOR OTHER DIVS -->
....
....
<!-- slide last -->
<div class="slide last">
<span class="img" style="background: url(img/andela/Andela-20.jpg) no-repeat center center; background-size: cover;"></span>
<!-- <p class="addbg" style="top:72%;"></p> -->
</div>
</div>
<nav class="pager">
</nav>
<!-- <p class="pager-txt">Explore more using the boxes above or the arrows below.</p> -->
</div>
</section>
最佳答案
你可以这样做:
@media only screen and (max-device-width: 736px) {
. img {
margin:0 auto !important;
}
更多信息请查看http://www.w3schools.com/css/css_rwd_mediaqueries.asp
关于html - 如何在桌面 View 中左对齐图像并在移动 View 中将其居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40006509/