htmlcss

I'm having an issue with full width img with CSS

I have a problem with the full width image. I have a section separated into 2: 40% and 60%. The 40% one have an image would like to put image take the width 100%. But looks like I am missing something.

Note that the image size is 2048x1365

Here is the code:

/*Start About me */
.about-me{
    background-color: #f1f1f1;
    overflow: hidden;
}
.about-me .image{
    float: left;
    width: 40%;
}
.about-me .image img{
    width: 100%;
    display: block;

}
.about-me .info{
    float: left;
    width: 60%;
}
.info h1{
    text-transform: uppercase;
    color: #252f31;
    padding-top: 10px;
}
.info p{
    font-size: 14px;
    color: #999;
    line-height: 20px;
}

.about-me .info h1,p{
    padding-left: 40px;
}
.about-me .hobis{
    overflow: hidden;
    margin-left: 40px;
}
.hobis{
    padding-bottom: 20px;

}
.hobis p{
    padding: 0;
    line-height: 20px;
    font-size: 12px;
    float: left;
}
.hobis h3{
    float: left;
    font-size: 16px;
}
.hobis i{
    color: #2dcc70;
    float: left;
    font-size: 30px;
    padding: 15px 20px 0 0;
}
.about-me .hobis > div{
    float: left;
    width: 50%;

}
/*End About me */
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Start About me section -->
    <div class="about-me">
        <div class="contaner">

            <div class="image">
                <img src="http://i.imgur.com/Cz7ednB.jpg" alt="test">
            </div>
            
            <div class="info">

                <h1>about me </h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Ducimus quo aspernatur veniam obcaecati corporis earum iure error Libero minima laboriosam !</p>

                <div class="hobis">

                    <div>
                        <i class="fa fa-bug"></i>
                        <h3>web design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
                    </div>

                    <div>
                        <i class="fa fa-chrome"></i>
                        <h3>web design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
                    </div>

                    <div>
                        <i class="fa fa-css3"></i>
                        <h3>web design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
                    </div>

                    <div>
                        <i class="fa fa-gittip"></i>
                        <h3>web design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum, doloremque. Officia veritatis, nesciunt obcaecati cum totam ! </p>
                    </div>

                </div>
            </div>
        
        </div>
    </div>
    <!-- End About me section -->

screenshot

Solution

  • To have the image take up the entire height of the column, you could either:

    1. Use CSS background-image with background-size (well supported)

    This example uses a blank element to hold the image. It's positioned absolutely, relative to the row container.

    .row {
  position: relative;
  overflow: hidden;
}

.details {
  float: left;
  width: 60%;
  margin-left: 40%;
  padding: 20px;
  background-color: #eee;
}

.image {
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background-image: url('http://placehold.co/400x300');
  background-size: cover;
  background-position: center;
}
    <div class="row">
  <div class="image"></div>
  <div class="details">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis lacus tristique tortor congue, ut rhoncus enim lobortis. Ut facilisis, massa eget viverra convallis, velit neque dapibus metus, vitae varius leo risus at quam. Donec et tincidunt odio.</p>
  </div>
</div>

    1. Use CSS content-fit (no IE browser support)