Responsive Bild Links in einer Zeile

Question

Updated photo Ich brauche Hilfe mit Bildern, die Links sind. Ich brauche, dass 5 Bilder bei allen Größen in einer Reihe bleiben, indem sie die Größe ändern. Diese 5 Bilder müssen an die Seiten des Netzes geklebt werden. Ich hoffe, somewho mir helfen könnte, weil ich noch nichts gefunden Artikel nicht .. Dank

Bild meiner resultion, das ist, was es auf jeder resultion aussehen muss natürlich kleiner:

.gallery { 
 
    max-width: 1615px; 
 
    margin: 0 auto; 
 
} 
 
.photo img { 
 
    width: 316.5px; 
 
    height: 200px; 
 
} 
 
.photo a { 
 
    float: left; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-bottom: 50px; 
 
} 
 
.rollover { 
 
    opacity: 1; 
 
    -o-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    background: url(img/plus.png) bottom right no-repeat rgb(28, 28, 28); 
 
    cursor: pointer; 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    opacity: 0; 
 
} 
 
.rollover:hover { 
 
    opacity: .7; 
 
    -o-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -webkit-transition: -webkit-transform 1s; 
 
    -webkit-box-shadow: 0px 0px 4px #000; 
 
    -moz-box-shadow: 0px 0px 4px #000; 
 
    box-shadow: 0px 0px 4px #000; 
 
} 
 
#roll-text, 
 
#roll-date { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    width: 250px; 
 
    text-align: left; 
 
    margin-left: 20px; 
 
    font-family: "Open Sans"; 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
} 
 
#roll-text { 
 
    margin-top: 70px; 
 
} 
 
#roll-date { 
 
    margin-top: 20px; 
 
}

<div class="gallery"> 
 
    <div class="photo"> 
 
    <a href="#"><img src="img/first-image.png"> 
 
     <div class="rollover"> 
 
     <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p> 
 
     <p id="roll-date">24. November 2014</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="photo"> 
 
    <a href="#"><img src="img/second-image.png"> 
 
     <div class="rollover"> 
 
     <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p> 
 
     <p id="roll-date">24. November 2014</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="photo"> 
 
    <a href="#"><img src="img/third-image.png"> 
 
     <div class="rollover"> 
 
     <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p> 
 
     <p id="roll-date">24. November 2014</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="photo"> 
 
    <a href="#"><img src="img/fourth-image.png"> 
 
     <div class="rollover"> 
 
     <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p> 
 
     <p id="roll-date">24. November 2014</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="photo"> 
 
    <a href="#"><img src="img/first-image.png"> 
 
     <div class="rollover"> 
 
     <p id="roll-text">Odťahovanie vozidiel z verejných komunikácií súkromnou spoločnosťou</p> 
 
     <p id="roll-date">24. November 2014</p> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

den folgenden Satz hinzufügen:

1. float: left; zu .photo
2. width: 20%;-.photo
3. width: 100%;-.photo a
4. width: 100%; zu .photo img
5. height: auto; zu .photo img
6. width: 100% zu .gallery

Warum? Die Bilder müssen in einer Reihe fließen, daher müssen Sie einen Wert für float festlegen. Wenn Sie 5 Bilder in einer Reihe haben möchten, muss jeder Fotobehälter 20% der Breite einnehmen (jedes Foto wiederum 100% seines Containers). Stellen Sie die Höhe auf ein, um sicherzustellen, dass die Bilder nicht gequetscht werden und ihr Seitenverhältnis beibehalten wird. Lassen Sie die Galerie auch von Seite zu Seite gehen, indem Sie ihr 100% Breite geben.

Das sollte den Trick tun.

Answer 2

Das Problem war, dass man eine feste Breite für das Bild hatte. Dies ergab nun für jede Auflösung dieselbe Breite.

.photo img { 
    width: 316.5px; 
    height: 200px; 
} 

Um es zu beheben diese

.photo a { 
    width: 20%; 

} 

.photo img { 
    width: 100%; 
    height: 200px; 
} 

Answer 3

Versuchen Sie dies in Ihrem css

.photo img { 
    width: 100%; 
    height: 200px; 
}