Menu icon Foundation
img inside column div

Hello Guys,

 

I'm very new on exploring Foundation 6 and i'm trying to learn + build my new portfolio with it. But i already came across a problem i can't overcome.

So what i'm trying to do is basically divide the page in half (fluid) and use text on one side, and image on the other. But for some reason, the <img> tag in <div> doesn't understand "background-size: cover;" command so it just stays small.

Or if i use the "half-image" css ON the img tag itself, the image just does not cover, but gets distorted.

Looking forward for your feedbacks,

thanks in advance. 

 

<section class="intro">
    <div class="expanded row">
        <div class="column large-6 small-1 half-text">
            <h3 class="intro-text align-vertical">8-bit ethical locavore asymmetrical, brooklyn ugh literally kitsch hashtag DIY heirloom yuccie pabst portland. Blue bottle lumbersexual schlitz tumblr seitan, DIY chicharrones occupy vice venmo hoodie single-origin coffee. Craft beer four loko vice sriracha beard fap, hella heirloom.</h3>
        </div>
        <div class="column large-6 small-1 half-image">
            <img src="assets/img/musiclive-mobile.jpg">
        </div>
     </div>
</section>
        

img tag does not "cover" the div

fluidproblemquestionimgcolumns

Hello Guys,

 

I'm very new on exploring Foundation 6 and i'm trying to learn + build my new portfolio with it. But i already came across a problem i can't overcome.

So what i'm trying to do is basically divide the page in half (fluid) and use text on one side, and image on the other. But for some reason, the <img> tag in <div> doesn't understand "background-size: cover;" command so it just stays small.

Or if i use the "half-image" css ON the img tag itself, the image just does not cover, but gets distorted.

Looking forward for your feedbacks,

thanks in advance. 

 

<section class="intro">
    <div class="expanded row">
        <div class="column large-6 small-1 half-text">
            <h3 class="intro-text align-vertical">8-bit ethical locavore asymmetrical, brooklyn ugh literally kitsch hashtag DIY heirloom yuccie pabst portland. Blue bottle lumbersexual schlitz tumblr seitan, DIY chicharrones occupy vice venmo hoodie single-origin coffee. Craft beer four loko vice sriracha beard fap, hella heirloom.</h3>
        </div>
        <div class="column large-6 small-1 half-image">
            <img src="assets/img/musiclive-mobile.jpg">
        </div>
     </div>
</section>
        

img tag does not "cover" the div

Metin Saray over 3 years ago

And here's my CSS for half-text and half-image. I also added an example on how the half-image looks when it's not on the div, but on the img tag.

.align-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.half-image {
    height: 100vh;
    background-size: cover;
}

.half-text {
    height: 100vh;
    padding: 150px;
    min-height: 50vh;
}