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>