我现在正在为我自己的 AnchorCMS 博客设计/开发主题，我遇到了两个障碍。
我一直在尝试让 img 标签跨越所有视口(viewport)宽度，(我通过将它们定位为 absolute 然后设置 max-width 设置为 100%)，但是有一个问题:如果我将 height 设置为任何小于 100% 的值，图像当然会失真。
我希望它保持在 100%-100%，作为一种背景，并且只将 height 作为裁剪属性，比如我将它设置为 background-image 的 background-size 为 cover。这是一个例子:
因为这将成为一个 anchor 主题，(与 PHP 一起使用)，它不会像 divs 和 background 定位的图像一样工作。
此外，还有其他问题:我如何设置 img 的 margin-bottom 以将 p 推到下方？ A of this, positioning it as absolute 不会让我，clearfixing 它似乎没有帮助。
伙计们，我能做什么？我卡住了。谢谢你! :)
--
这里是我设计阶段的article.html和style.css:
body {
font: 28px 'Cardo', 'Georgia', 'Times New Roman', Times, serif;
color: #272F32;
text-align: left;
background: #FFFFFF;
}
/* Main CSS & Header */
section {
max-width: 60%;
margin-right: 3%;
float: right;
text-align: left;
}
a {
color: #b10c00;
text-decoration: none;
}
a:hover {
color: #345059;
}
article a:visited, ul#main-menu a:visited {
color: #272F32
}
.group:after {
content: "";
display: table;
clear: both;
}
ul#main-menu {
display: block;
margin-top: 3%;
}
ul#main-menu li {
font: 24px 'Playfair Display', 'Georgia', 'Times New Roman', Times, serif;
display: inline-block;
float: right;
text-align: right;
margin-left: 40px;
text-decoration: overline;
}
header#main-header {
margin-bottom: 40px;
}
/* Articles Page */
article {
margin-bottom: 20px;
}
h1 {
font: 72px/1.2em 'Playfair Display', 'Times New Roman', Times, serif;
margin-bottom: 10px;
}
small {
font-size: 20px;
font-family: 'Playfair Display', 'Georgia', 'Times New Roman', Times, serif;
font-style: italic;
}
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 30px;
}
nav#pagination a{
font: 24px 'Playfair Display', 'Georgia', 'Times New Roman', Times, serif;
display: inline-block;
width: 45px;
float: right;
text-align: right;
}
nav#pagination a:last-child {
float: left;
text-align: left;
}
footer {
margin-bottom: 20px;
}
/* Single Article */
.single-article header h1{
position: absolute;
left: -25px;
top: -50px;
max-width: 1050px;
font-size: 150px;
margin: 0;
padding: 0;
z-index: -1;
}
.single-article header {
margin-bottom: 310px;
}
.single-article p {
font-size: 24px;
line-height: 1.4em;
margin-bottom: 36px;
}
article.single-article p:last-child {
background: green;
margin-bottom: 10px;
}
img {
position: absolute;
left: 0;
max-width: 100%;
height: 20%;
background-size: cover;
align-content: center;
}
/* Media Queries */
@media (max-width: 1600px) {
body, ul#main-menu li, nav#pagination a {
font-size: 24px;
}
h1 {
font-size: 48px;
}
}
@media (max-width: 1300px) {
section {
min-width: 60%;
margin-right: 4%;
}
body, ul#main-menu li, nav#pagination a {
font-size: 20px;
}
ul#main-menu {
margin-top: 5%;
}
h1 {
font-size: 48px;
margin-bottom: 10px;
}
small {
font-size: 18px;
}
}
@media (max-width: 700px) {
section {
min-width: 65%;
margin-right: 5%;
}
body, ul#main-menu li, nav#pagination a {
font-size: 18px;
}
ul#main-menu {
margin-top: 7%;
}
hr {
margin-top: 25px;
}
h1 {
font-size: 36px;
margin-bottom: 10px;
}
small {
font-size: 16px;
}
}
@media (max-width: 430px) {
section {
min-width: 80%;
margin: 10%;
}
body, ul#main-menu li, nav#pagination a {
font-size: 16px;
}
ul#main-menu {
min-width: 100%;
margin: auto;
}
ul#main-menu li {
float: none;
margin: 0 auto;
padding: 0 15px;
text-align: left;
}
hr {
margin-top: 20px;
}
h1 {
font-size: 26px;
margin-bottom: 5px;
}
small {
font-size: 14px;
}
}<!DOCTYPE html lang="es">
<html>
<head>
<title>Article Proof</title>
<!-- Asset links -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700,400italic|Cardo' rel='stylesheet' type='text/css'>
<link href="art/assets/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="art/assets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="group">
<header id="main-header">
<nav>
<ul id="main-menu" class="group">
<li><a href="index.html">Blog</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<article class="single-article">
<header>
<a href="#try"><h1>The coming of age of the century</h1></a>
</header>
<p>Est multos in quis est tempor ea incurreret. Senserit amet laborum, singulis eu
vidisse. Ingeniis tamen iis tempor relinqueret de cernantur est velit vidisse,
dolor ex nostrud, officia ipsum officia tempor, deserunt relinqueret et
ingeniis, sed pariatur transferrem eu admodum legam ipsum aut eram, id ad varias
litteris.
Sint consequat do officia te incurreret fugiat laborum appellat, lorem
excepteur reprehenderit quo anim commodo tractavissent ubi ingeniis lorem
vidisse nostrud a o quibusdam efflorescere sed legam quamquam in singulis aut
offendit firmissimum o laboris. Hic quem aliquip eu nulla litteris exquisitaque
se nam si philosophari an expetendis tamen summis te legam ex ex fugiat quid
quae singulis se duis singulis sed reprehenderit, iis summis multos ita litteris
eu sunt officia te eiusmod. Non legam eiusmod hic nam fabulas efflorescere,
culpa consequat si arbitror si se se legam tempor. Mentitum quis amet o legam.
Malis excepteur firmissimum, nescius iis nostrud, magna ullamco cohaerescant te
irure appellat possumus an fugiat consectetur probant ipsum expetendis qui si in
malis velit quid, tamen iis de malis cernantur ad ad anim deserunt deserunt.</p>
<img src="art/assets/image.jpg">
<p>Sed o nulla sint quorum. Nisi e ne quid laboris, fabulas cillum fugiat
expetendis aliqua se ab velit sed summis, an de varias quibusdam, litteris aut
cillum pariatur an in fore tractavissent nam laboris ubi offendit ex dolore
mentitum reprehenderit.
Ad dolor occaecat, officia multos possumus non eu legam
et quem qui te se sunt minim tamen. Excepteur si amet proident, aut commodo
distinguantur non et hic nulla dolore varias ut irure ea ingeniis e illum, an
ipsum irure qui cernantur, mandaremus ad senserit, lorem doctrina sed
instituendarum non dolore ne singulis ea culpa. Excepteur se fugiat, enim id
probant, ne nisi in anim iis irure occaecat ex nostrud, incurreret ad cillum
tempor, consequat sempiternum ad admodum ubi nulla pariatur et velit amet, ab
est domesticarum.
De dolore transferrem id te malis a amet, an ubi eram officia,
labore expetendis philosophari. Ne quem aliquip, arbitror ad duis o quae
cernantur non graviterque ab do aut nulla excepteur si quem possumus est
nostrud, minim relinqueret officia nulla cernantur ab nam culpa vidisse
consectetur ut sed qui quae mentitum.</p>
<p>Proident summis ingeniis officia. Do quis iudicem fidelissimae. Admodum se
mentitum. Si aute tempor laboris. Ita duis offendit admodum ab est aliqua irure
ubi laborum id eiusmod quae aut possumus firmissimum ex te nostrud a laborum et
se sunt aute de cupidatat ubi laboris lorem magna mentitum fore eu deserunt ubi
veniam ut magna quamquam praetermissum. Fabulas amet consequat. Ad duis
exercitation, mandaremus malis arbitror deserunt, iis eram summis aut senserit
se duis litteris reprehenderit.</p>
<p>Commodo legam quorum si dolor si incididunt fore dolore incididunt enim. Tamen
domesticarum doctrina cillum ingeniis hic se fugiat amet ne appellat, excepteur
de sint aliquip hic tamen sed litteris, aliquip eram an proident voluptatibus
non se sint aliquip familiaritatem ab id amet tempor senserit, irure relinqueret
excepteur aute litteris. Hic esse occaecat fabulas, illum ita aut irure
quamquam. Quorum se officia a multos o iis quem incurreret cupidatat. A cillum
tamen quorum commodo, in nescius illustriora, ea litteris praesentibus non quid
fidelissimae expetendis culpa offendit iis eram voluptate despicationes eu nam
tamen lorem ne doctrina non culpa admodum eiusmod ne quae proident commodo. Se
se dolor quorum irure, cupidatat quid tamen nescius enim, ita dolor mentitum, ad
culpa malis id incididunt. Ea incurreret ita iudicem iis mandaremus quo quae
offendit, ne aliqua nescius, ad si amet malis minim e est quid ut quis, culpa
consequat ne esse quis, ea irure fabulas doctrina, quem proident sed pariatur.</p>
<p>Te varias consectetur, sed labore ea irure. Quem quo pariatur. E possumus
coniunctione, iudicem et aliqua e id quae cohaerescant nam occaecat velit a
arbitror graviterque. Quorum ubi ut cillum ullamco ita quamquam arbitrantur si
senserit. Do nulla doctrina concursionibus nam duis eu eiusmod si minim, lorem
relinqueret senserit varias tempor ubi se veniam fabulas illustriora. Cernantur
a nulla. Culpa cernantur o iudicem.</p>
<small>written 4 days ago</small>
</article>
<footer>
<hr/>
<small class="credit"><a href="https://github.com/ferpalaciosd/artanchor" title="Art: GitHub">Art</a> for <a href="http://anchorcms.com" title="Anchor CMS Homepage">Anchor CMS</a>, Created by <a href="https://twitter.com/ferpalaciosd" title="Fernando Palacios Dueso">Ferpalaciosd</a></small>
</footer>
</section>
</body>
</html>最佳答案
您可以通过使用一个很酷的新 CSS3 单元来实现您想要的结果:vw ( viewport units ) 其中有 good support在所有现代浏览器中。
img {
/* make image 100% of viewport width */
width: 100vw;
/* move image left 37% of viewport width: 100% - (60% + 3% margin) */
margin-left: -37vw;
}
Demo
边距 -37% 取决于您的 section 样式:
section {
max-width: 60%;
margin-right: 3%;
}
待办事项
当 section 位置发生变化时，您需要更新 img 样式，例如您的 @media (max-width: 430px) 媒体查询。
更新
您可以通过清除 body/html 上的边距来修复轻微的水平滚动。
(demo 已更新)
html, body {
margin: 0;
}
关于html - 裁剪 <image> 高度并添加垂直边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32570086/