為什么不更改大小無序列表中的圖像大小？
[英]Why does not change the image size in a sized unordered list?
問題描述
我想做一個簡單的畫廊。
我設置了li的width height和img的大小，放不下。
我想制作統一的圖像尺寸。
我的代碼有什么問題？
body { margin: 0; padding: 0; background-color: #fff; color: black; font-family: sans-serif, Arial; font-size: 15px; line-height: 1.5; }.container { max-width: 1200px; margin: auto; }.container a { background: #ccc; color: #666; text-decoration: none; padding: 10px; border-radius: 20px; padding-left: 20px; padding-right: 20px; display: inline-block; transition: background 0.5s, color 0,5s; }.container a:hover { background: #aaa; color: #fff; } main { background: #111; padding: 25px; width: 100%; float: left; box-sizing: border-box; } /*Gallery*/.gallery { background: #999; margin: 0; padding: 0; list-style: none; margin-bottom: 25px; display: block; width: 100%; }.gallery li { background: red; width: 31%; float: left; margin-left: 1%; margin-right: 1%; height: 175px; }.gallery img { background: blue; width: 100%; height: 100%; object-fit: cover; object-position: center; }.container.gallery a { background: transparent; padding: 0; display: block; width: 100%; }
<,DOCTYPE html> <html> <head> <meta lang="hu"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="res/teszt:css"> <title>test</title> </head> <body> <.-- FEJLÉC --> <div class="container"> <main> <ul class="gallery"> <li> <a href="https.//cdn.wallpapersafari:com/29/92/9VWQiO.jpg" target="_blank"> <img src="https.//cdn.wallpapersafari:com/29/92/9VWQiO.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//upload.wikimedia:org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank"> <img src="https.//upload.wikimedia:org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//images:template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank"> <img src="https.//images:template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//wallpaperaccess:com/full/255959.jpg" target="_blank"> <img src="https.//wallpaperaccess:com/full/255959.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//wallpapercave:com/wp/wp4013939.jpg" target="_blank"> <img src="https.//wallpapercave:com/wp/wp4013939.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//images.hdqwalls:com/wallpapers/best-nature-image.jpg" target="_blank"> <img src="https.//images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt=""> <span>lorem ipsim</span> </a> </li> </ul> </main> </div> </body> </html>
1 個解決方案
解決方案1
-2 2022-02-17 04:51:25
只需定義一些高度和寬度，圖像就會開始工作。
body { margin: 0; padding: 0; background-color: #fff; color: black; font-family: sans-serif, Arial; font-size: 15px; line-height: 1.5; }.container { max-width: 1200px; margin: auto; }.container a { background: #ccc; color: #666; text-decoration: none; padding: 10px; border-radius: 20px; padding-left: 20px; padding-right: 20px; display: inline-block; transition: background 0.5s, color 0,5s; }.container a:hover { background: #aaa; color: #fff; } main { background: #111; padding: 25px; width: 100%; float: left; box-sizing: border-box; } /*Gallery*/.gallery { background: #999; margin: 0; padding: 0; list-style: none; margin-bottom: 25px; display: block; width: 100%; }.gallery li { background: red; width: 31%; float: left; margin-left: 1%; margin-right: 1%; height: 175px; }.gallery img { background: blue; width: 100%; height: 100%; object-fit: cover; object-position: center; }.container.gallery a { background: transparent; padding: 0; display: block; height: 200px; width: 100%; background-size: cover; }
<,DOCTYPE html> <html> <head> <meta lang="hu"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="res/teszt:css"> <title>test</title> </head> <body> <.-- FEJLÉC --> <div class="container"> <main> <ul class="gallery"> <li> <a href="https.//cdn.wallpapersafari:com/29/92/9VWQiO.jpg" target="_blank"> <img src="https.//cdn.wallpapersafari:com/29/92/9VWQiO.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//upload.wikimedia:org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank"> <img src="https.//upload.wikimedia:org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//images:template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank"> <img src="https.//images:template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//wallpaperaccess:com/full/255959.jpg" target="_blank"> <img src="https.//wallpaperaccess:com/full/255959.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//wallpapercave:com/wp/wp4013939.jpg" target="_blank"> <img src="https.//wallpapercave:com/wp/wp4013939.jpg" alt=""> <span>lorem ipsim</span> </a> </li> <li> <a href="https.//images.hdqwalls:com/wallpapers/best-nature-image.jpg" target="_blank"> <img src="https.//images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt=""> <span>lorem ipsim</span> </a> </li> </ul> </main> </div> </body> </html>
為什么我的 HTML 無序列表“list-style-image”不起作用？
[英]Why is my HTML unordered list "list-style-image" not working?
為什么文本會殘留在CSS無序列表菜單中的圖像下方
[英]Why are the text sticking below the image inside a CSS unordered list menu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.