將 div 與屏幕高度中的圖像匹配
[英]Fit div with images in screen height
問題描述
我有一個簡單的 div，它用看起來像和一些樣式的圖像模擬表格，我設法使用 CSS 將圖像適合容器寬度（容器作為瀏覽器或另一個 div），但我真的很難處理高度，所以是這樣可以使圖片適合寬度和高度嗎？
.cabinet { padding: 0; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }.module { display: table-cell; }.module button { border-color: black; border-style: solid; border-width: thin; }.module img { width: 100%; }
<div class="cabinet"> <div class="rack"> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> </div> <div class="rack"> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> <div class="module"> <button> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </button> </div> </div> </div>
1 個解決方案
解決方案1
0 2020-12-09 13:17:23
我已經重構了你的代碼。 刪除了不必要的 HTML 和 CSS。 看看這是不是你想要的結果。
.cabinet { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; } img { width: 100%; object-fit: cover; border: 1px solid #000; }
<html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <div class="cabinet"> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> <div class="module"> <img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" /> </div> </div> </body> </html>
如何使 div 適合我的屏幕高度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.