更新

Question

我正在为我自己的AnchorCMS博客设计/开发主题，我遇到了两个障碍。

我一直在尝试img标记来覆盖所有视口宽度（我通过将它们定位为absolute然后将max-width设置为100％来管理），但是有一个问题：如果我将height设置为小于100％的任何值，那么图像当然会被扭曲。

我希望它保持在100％-100％，作为一种背景，并且只将height作为裁剪属性，例如，如果我将其设置为background-image使用background-size cover。这是一个例子：

由于这将成为一个Anchor主题（可与PHP一起使用），因此divs的{{1}}位置图像无效。

另外，还有其他内容：我如何设置background的{{1}}以推送下面的img？其中一个，将其定位为margin-bottom不会让我，并且明确修复它似乎没有帮助。

我该怎么办？我被卡住了。谢谢！：）

-

这是我设计阶段的article.html和style.css：

absolute

Answer 1

我不会将代码分成两篇文章，但我会在文章中使用正文部分，并在内部使用全宽横幅，例如：

Conditional Constructs

HTML：

    <section class="group">

        <article class="single-article">
            <header>
                <a href="#try"><h1>The coming of age of the century</h1></a>
            </header>
<div class="body">                
            <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>
</div>
            <img src="http://www.vietnamtravelblogs.com/wp-content/uploads/2013/01/44-LCS-82.jpg">
<div class="body">                
            <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>
</div>
        </article>


    </section>

CSS：

img {
width:100%;
max-width: 100%;
float:right;
margin-bottom:30px;
}
.img-wrapper {
height:100px;
overflow:hidden;
margin-bottom:10px;
}
article .body {
width:60%;
float:right;
}

Answer 2

您可以使用一个很酷的新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%;
}

TODO

在img媒体查询中section位置发生变化时，您需要更新@media (max-width: 430px)个样式。

更新

您可以通过清除body / html上的边距来修复轻微的水平滚动（demo已更新）

html, body {
    margin: 0;
}

裁剪<img/>高度＆amp;添加垂直边距

2 个答案:

Demo

TODO

更新