0

I'm in a process of designing/developing a theme for my own AnchorCMS blog right now, and I've encountered two roadblocks.

I've been trying for img tags to span all the viewport width, (which I've managed by positioning them as absolute and then setting the max-width to 100%), but there's a problem: if I set the height to anything less than 100%, the image will, of course, be distorted.

I'd want it to stay at 100%-100%, as a kind of background, and only take the height as a cropping attribute, such as if I set it as a background-image with a background-size of cover. Here's an example:

blog design with image

Since this is going to become an Anchor theme, (which works with PHP), It won't work as divs with background positioned images.

Plus, there's something else: how could I set the img's margin-bottom to push the p below? A of this, positioning it as absolute won't let me, and clearfixing it doesn't seem to help.

What could I do guys? I'm stuck. Thank you! :)

--

Here the article.html and style.css of my design phase:

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>
Ferpalaciosd
  • 107
  • 1
  • 11
  • @AntonioHernández, how does that work with a variable height image? – hungerstar Sep 14 '15 at 17:11
  • I reviewed the code thoroughly, and the only solution I think of is to divide you article in two different `
    `'s, a "before the img" and "after the img", that way you can freely set the image between those elements, then you can work with it to your heart content. The image is so erratic because the size of the `
    ` limits the size it can take, and using absolute works like that because it takes the images out of the DOM flow, so it's a clear no-no.
     – Antonio Hernández Sep 14 '15 at 17:36
  • Cutting the article isn't possible because, like I said, this is a theme for the Anchor CMS, which builds the articles by PHP. Everything has to be inside one article. – Ferpalaciosd Sep 15 '15 at 08:26

2 Answers2

0

I wouldn't split the code into 2 articles, but I would have a body part for articles and a full width banner for within, such as:

http://jsfiddle.net/xkj83p2v/

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;
}
Luc Laverdure
  • 1,398
  • 2
  • 19
  • 36
  • Same here: I can't open and close divs inside the article, all CSS has to act on the img tag only. Bear in mind this is no static design: it's for a PHP-based CMS. – Ferpalaciosd Sep 15 '15 at 08:29
0

You can achieve your desired result by using a cool new CSS3 unit: vw (viewport units) which has good support among all modern browsers.

img {
    /* make image 100% of viewport width */
    width: 100vw;

    /* move image left 37% of viewport width: 100% - (60% + 3% margin) */
    margin-left: -37vw;
}

Demo

The margin -37% is based on your section style:

section {
    max-width: 60%;
    margin-right: 3%;
}

TODO

you'll need to update the img styles when section position changes like in your @media (max-width: 430px) media query.

Update

You can fix the slight horizontal scrolling by clearing the margin on body/html.
(The demo has been updated)

html, body {
    margin: 0;
}
Kevin Jantzer
  • 9,215
  • 2
  • 28
  • 52
  • This is great! Clear responsive capabilities as well, and I could just crop the images by myself, haha. Just a question: how do I compatibilize it backwards? – Ferpalaciosd Sep 15 '15 at 08:29
  • Also, I still experience a small horizontal sliding while at full width, (so it can't be produced by changes in the section). Any ideas? – Ferpalaciosd Sep 15 '15 at 09:35
  • "how do I compatibilize it backwards" – what do you mean? – Kevin Jantzer Sep 15 '15 at 15:35
  • Nevermind, there's a much wider support than I initially thought, haha. I was thinking about backwards compatibility in old browsers, (IE and the like), but I don't think it will be necessary. Any idea why it still produces lateral scrolling? It doesn't if I set something as -36.5vw, but as soon as I put more, it cracks. – Ferpalaciosd Sep 16 '15 at 08:31
  • Still doesn't work, (HTML and CSS updated with reset.css on this [demo](http://codepen.io/anon/pen/qOZPQR)). – Ferpalaciosd Sep 17 '15 at 19:22
  • Don't know what to tell you then. I just tested your demo in Chrome, Safari, and Firefox and could not get any horizontal scrolling to happen. – Kevin Jantzer Sep 17 '15 at 20:17
  • As the initial question was already, I'm considering this closed, haha. I'll fix the rest on my own :) – Ferpalaciosd Sep 18 '15 at 13:42
  • PS. Problem found: the vertical scroll bar caused the horizontal one, [proof](http://stackoverflow.com/questions/29551606/why-does-vw-include-the-scrollbar-as-part-of-the-viewport). – Ferpalaciosd Sep 18 '15 at 13:52
  • Ah... interesting. You must be on a Windows machine? Cause in OSX the scroll bar is hidden and more of an overlay. Glad you figured it out. – Kevin Jantzer Sep 18 '15 at 14:32