web-dev-qa-db-ja.com

CSSグリッドレイアウト内の画像のサイズを制御する

CSSグリッドレイアウトには、多数の領域と写真コンテナーがあります。

方法がわかりません：

  1. 写真のサイズを制御して、グリッドの領域内に収まるようにします

  2. 写真の幅を100％（つまり、コンテナに等しい）に保ち、写真に合わせてコンテナの高さを調整します。基本的に、ウィンドウが小さくなると、写真の幅が小さくなり、高さも小さくなります-タグ、アルバム、および要素を回転させます。

.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>
htmlcsscss3css-grid
17
martin

ここには2つの異なる問題があります。

最初の方法について説明します。最初の方法は、コンテナに画像を含めることです。あなたはほとんど持っていました。

あなたのコード：

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

コンテナをオーバーフローさせないように、画像の最大高さを指定する必要がありました。

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

JSFiddleデモ

2番目の問題は、画像コンテナーのサイズを拡大縮小し、画像が小さくなったときに下のグリッド項目をドラッグすることであり、非常に複雑です。

これは画像に関連する問題ではありません。実際、この問題を解決しようとするときは、画像を完全に削除できます。

これは、グリッドアイテム（画像コンテナー）のサイズを動的に変更する問題です。サイズがgrid-template-columnsおよびgrid-template-rowsで制御されているときに、このグリッド項目が画像サイズに関連してサイズを変更するのはなぜですか？

さらに、グリッドアイテムの一番下の行（tag、album、rotate）が画像コンテナーの上下に続くのはなぜですか？彼らは列を出なければなりません。

グリッドコンテナー全体のスケーリングは問題になりません。しかし、1つのグリッドアイテム（画像コンテナー）のみをスケーリングしたいようです。トリッキーです。おそらく、追加のコンテナ、長さのauto値、およびスクリプトの可能性があります。

画像の行にauto値を指定すると、次のようになります。 JSFiddle demo

22
Michael_B

IMGタグではなく、グリッドセルの1つの内側でbackground-imageを使用するとどうなりますか（表示は使用していません：グリッドはまだb/cなので、とても新しいです-クールです！）

次に、background-sizeおよびbackground-positionを使用して、そのセル内で適切にサイズ変更できます。

.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>
3
flyer

css-grid cellandsrcの両方のアスペクト比の任意の組み合わせで機能するわずかな修正がありますimg。 （セルのアスペクト比が画像のアスペクト比よりも大きいである場合にのみ受け入れられる解決策が機能するため）。とても簡単です：

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