2017-09-07 1 views
1

Ich habe ein CSS-Raster mit einer Reihe von Bereichen und einem Foto-Container.steuern die größe eines bildes in einem css grid

Ich weiß nicht, wie zu:

1) steuern, um die Größe des Fotos, so dass es im Bereich des Gitters enthalten ist, und

2) hält die Breite des Fotos bei 100% (also gleich seinem Behälter) und skalieren Sie die Höhe des Behälters auf das Foto. Im Grunde genommen dann das Fenster kleiner wird, wird die Breite des Bildes wird kleiner und damit auch die Höhe - Ziehen Sie den Tag, Album und drehen Elemente up ....

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(5, 1fr); 
 
    grid-template-rows: 40vh 30vh 30vh; 
 
    grid-gap: 10px; 
 
    grid-template-areas: 
 
    "info photo photo photo photo" 
 
    "comment photo photo photo photo" 
 
    "comment tag  tag album rotate" 
 
} 
 

 
.photo { 
 
    grid-area: photo; 
 
    background: yellow; 
 
} 
 

 
.photo>img { 
 
    object-fit: cover; 
 
    width: 100% 
 
} 
 

 
.info { 
 
    grid-area: info; 
 
    background: pink; 
 
} 
 

 
.tag { 
 
    grid-area: tag; 
 
    background: teal; 
 
} 
 

 
.comment { 
 
    grid-area: comment; 
 
    background: green; 
 
} 
 

 
.album { 
 
    grid-area: album; 
 
    background: red; 
 
} 
 

 
.rotate { 
 
    grid-area: rotate; 
 
    background: blue; 
 
}
<div class="container"> 
 
    <div class="photo"> 
 
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" /> 
 
    </div> 
 
    <div class="info">info</div> 
 
    <div class="tag">tag</div> 
 
    <div class="comment">comment</div> 
 
    <div class="album">album</div> 
 
    <div class="rotate">rotate</div> 
 
</div>

+1

glaube ich nicht, was Sie versuchen können zu erreichen, mit einem Raster durchgeführt werden. – BrandonW

Antwort

1

Sie haben hier zwei verschiedene Probleme.

Ich werde die erste adressieren, die das Bild in seinem Container enthalten soll. Du hattest es fast.

Ihr Code:

.photo > img { 
    object-fit: cover; 
    width: 100% 
} 

Sie nur eine maximale Höhe auf das Bild, um anzugeben erforderlich, damit es nicht den Behälter überlaufen könnte:

.photo > img { 
    object-fit: cover; 
    width: 100% 
    max-height: 100%; 
} 

jsFiddle demo


Das zweite Problem, das zu skalieren ist Die Größe des Bildcontainers und die Rasterelemente nach oben ziehen, wenn das Bild kleiner wird, ist erheblich komplexer.

Dies ist kein Problem in Bezug auf das Bild. In der Tat können Sie das Bild vollständig entfernen, wenn Sie versuchen, dieses Problem zu lösen.

Dies ist ein Problem bei der dynamischen Größenanpassung eines Rasterelements (des Bildcontainers). Warum ändert sich bei diesem Rasterelement die Größe im Verhältnis zur Bildgröße, wenn seine Größe von und grid-template-rows gesteuert wird?

Außerdem, warum sollte die untere Reihe von Rasterelementen (tag, album, rotate) folgen dem Behälter Bild entweder nach oben oder nach unten? Sie würden ihre Reihe verlassen müssen.

Die Skalierung des gesamten Gittercontainers wäre kein Problem. Aber es scheint, als ob Sie nur ein Rasterelement (den Bildcontainer) skalieren möchten. Es ist schwierig. Sie suchen wahrscheinlich nach zusätzlichen Containern, Werte für Längen und möglicherweise Skripting.

Hier ist, was passiert, wenn Sie die Bildzeilen ein auto Wert geben: jsFiddle demo

+1

Danke für Ihre Anleitung. Das erste Problem/Lösung löste meine Kopfschmerzen! Du hast recht mit dem 2. Teil. Ich werde es lösen, indem ich meine verschiedenen Layouts für die 3 Medienlayouts, mit denen ich arbeite (Handy, Tablet, Laptop), abstimme. Ich verstehe deinen Standpunkt völlig :-) – martin

-1

Sie wahrscheinlich brauchen explizite Breite hinzufügen: 100% zum Bild

+0

Ich habe das hinzugefügt, aber es lässt es einfach unten herausfallen ... Ich habe Objekt-fit versucht - aber das tut nichts – martin

0

Was passiert, wenn Sie einen Hintergrund-Bild in einem der Gitterzellen eher als ein IMG-Tag (nicht Anzeige verwendet: Grid noch b/c es ist so neu - cool!)

mit Dann Hintergrund-Größe und background-position, können Sie die Größe es richtig innerhalb dieser Zelle.

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(5, 1fr); 
 
    grid-template-rows: 40vh 30vh 30vh; 
 
    grid-gap: 10px; 
 
    grid-template-areas: "info photo photo photo photo" "comment photo photo photo photo" "comment tag  tag album rotate" 
 
} 
 

 
.photo { 
 
    grid-area: photo; 
 
    background: yellow; 
 
    height: 100%; 
 
    background-size: cover; /* <-- background size */ 
 
    background-position: center; /* <-- background position */ 
 
} 
 

 
.info { 
 
    grid-area: info; 
 
    background: pink; 
 
} 
 

 
.tag { 
 
    grid-area: tag; 
 
    background: teal; 
 
} 
 

 
.comment { 
 
    grid-area: comment; 
 
    background: green; 
 
} 
 

 
.album { 
 
    grid-area: album; 
 
    background: red; 
 
} 
 

 
.rotate { 
 
    grid-area: rotate; 
 
    background: blue; 
 
}
<div class="container"> 
 
    <div class="photo" style="background-image: url('https://thumbs.web.sapo.io/?epic=YmIzAEUIMb3pue+Zz8qV8QS/WuKmq0vrL/lWiluSn7SstKeeh7/UTTBAuDlhHFD6YC9+vaCHBQuNOXeVaHkjzTSE8tF3hMBev6512ha92Yc4kRw=&W=1200&H=627&crop=center&delay_optim=1')"> 
 
    </div> 
 
    <div class="info">info</div> 
 
    <div class="tag">tag</div> 
 
    <div class="comment">comment</div> 
 
    <div class="album">album</div> 
 
    <div class="rotate">rotate</div> 
 
</div>

Verwandte Themen