havung ein Problem mit voller Breite img mit CSS

Question

Ich habe ein Problem mit der Vollbildbreite. Ich habe einen Abschnitt in 2: 40% und 60% getrennt. Die 40%, die ein Bild haben möchten, setzen das Bild auf die Breite 100%. Aber es sieht so aus, als würde ich etwas vermissen.

beachten Sie, dass die Bildgröße 2048x1365

Hier ist der Code:

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

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

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

 
} 
 
.hobis p{ 
 
\t padding: 0; 
 
\t line-height: 20px; 
 
\t font-size: 12px; 
 
\t float: left; 
 
} 
 
.hobis h3{ 
 
\t float: left; 
 
\t font-size: 16px; 
 
} 
 
.hobis i{ 
 
\t color: #2dcc70; 
 
\t float: left; 
 
\t font-size: 30px; 
 
\t padding: 15px 20px 0 0; 
 
} 
 
.about-me .hobis > div{ 
 
\t float: left; 
 
\t 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 --> 
 
\t <div class="about-me"> 
 
\t \t <div class="contaner"> 
 

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

 
\t \t \t \t <h1>about me </h1> 
 

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

 
\t \t \t \t <div class="hobis"> 
 

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

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

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

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

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

Answer 1

das Bild zu haben, die gesamten nehmen Höhe der Spalte, könnten Sie entweder:

1) Verwenden Sie CSS-Hintergrundbild mit Hintergrund-Größe (gut unterstützt)

In diesem Beispiel wird ein leeres Element zum Halten des Bildes verwendet. Es ist absolut relativ zum Zeilencontainer positioniert.

.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.it/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>

2) Verwenden Sie CSS content-fit (keine IE-Browser-Unterstützung)

Answer 2

Der beste Weg, dies zu erreichen, besteht darin, das img Entfernen von Ihr Markup und fügen Sie es dann als Hintergrundbild für den Container über CSS3 hinzu. Sie müssen auch background-size: cover; hinzufügen, so nimmt es den gesamten Raum zur Verfügung (deckt gesamten übergeordneten Container):

HTML:

<div class="container"></div> 

CSS:

.container { 
    background: url('path/to/image.jpg') no-repeat center top/cover; 
}