0
我有以下的HTML(Fiddle Example):裁剪圖像左,右
<header>
<div class="wrapper">
<em class="brand">
<img src="http://via.placeholder.com/200x40?text=LOGO"/>
</em>
<nav class="menu">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="slides">
<div class="slide">
<div class="frame">
<img src="http://via.placeholder.com/1200x400?text=Image to Crop" />
</div>
<div class="text">
<h2>Our Message</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</header>
<main>
Main content
</main>
通訊員CSS:
header {
text-align: center;
}
div.wrapper {
margin: 0 auto;
max-width: 640px;
text-align: left;
position: relative;
}
em.brand img {
display: block;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 0;
padding: 8px;
}
ul.menu li a {
text-decoration: none;
font-size: 18px;
color: white;
}
em {
border: 1px solid red;
position: absolute;
z-index: 2000;
}
nav {
position: absolute;
z-index: 2000;
right: 0;
}
.slides {
width: 100%;
position: relative;
}
.slide .frame img {
width: 100%;
margin: 0 -100px;
}
.slide .text {
position: absolute;
text-align: center;
top: 80px;
width: 100%;
}
.slide .text h2 {
color: white;
font-size: 40px;
margin: 8px;
}
.slide .text p {
color: white;
font-size: 20px;
margin: 8px;
}
main {
border: 1px solid red;
font-size: 20px;
}
使用媒體查詢我所需要的,有時候,通過裁剪調整圖像它在左/右或底部/頂部:
.slide .frame img {
width: 100%;
margin: 0 -100px;
}
這並不改變圖像。它只會改變它,如果我嘗試上/下:
.slide .frame img {
width: 100%;
margin: -100px 0;
}
任何想法爲什麼?
我不使用背景大小和位置的原因是因爲這是一個滑塊,標題和文本隨滑塊圖像而改變。所以我想將這些內容分組在一起。是否有意義? –
我想這是一個選項。但我總是優先考慮製作文本文本(但如果它不是您想要被搜索引擎編入索引的網站,那麼我認爲它是有道理的) –