CSS网格中的图像不会调整为最大尺寸。 尺寸
[英]Image in CSS grid won't resize to the max. size
问题描述
I am trying to create an HTML modal and I wanted to create the base HTML and the CSS in an external file first. 
我正在尝试创建HTML模态，我想先在外部文件中创建基本HTML和CSS。
The final output should look this: 最终输出应如下所示：
Design Mock
设计模拟
The goal here is for the minimap to scale with the size of the modal while keeping the aspect ratio. 此处的目标是使小地图在保持纵横比的同时，根据模态的大小进行缩放。 This is for the game world of tanks and the maps should always be as big as possible (without cutting out any parts of the image). 这是针对坦克的游戏世界的，地图应始终尽可能大（不裁剪图像的任何部分）。
My first idea was to get the map as a background with. 我的第一个想法是将地图作为背景。
background-size: cover;
background-position: center;
This was my 1st idea since I used this before in another application and it worked ok. 这是我的第一个想法，因为我之前在另一个应用程序中使用过它，但是效果很好。 The problem here is that the image is not using all the space given by the grid. 这里的问题是图像没有使用网格给定的所有空间。
Grid view of image as background
图像作为背景的网格视图
body { background: #EBEBEB; font-family: sans-serif; color: #343434; } .modal_content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "modal_header" "modal_content"; grid-gap: 25px; } .modal_header { background: #ACACAC; grid-area: modal_header; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "modal_title exit"; padding: 10px; padding-right: 25px; } .modal_title { grid-area: modal_title; justify-self: center; align-self: center; } .modal_closeBtn { grid-area: exit; justify-self: right; align-self: center; font-size: 30px; font-weight: bold; } .modal_body { grid-area: modal_content; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "modal_tactics modal_details"; align-items: center; justify-items: center; grid-gap: 50px; padding: 15px; } .modal_img { padding: 50px; grid-area: modal_tactics; background: url("http://placekitten.com/512/512"); background-size: cover; background-position: center; } .modal_details { font-size: 30px; grid-area: modal_details; display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/modal.css"> <title>Document</title> </head> <body> <div id="simpleModal" class="modal"> <div class="modal_content"> <div class="modal_header"> <span class="modal_closeBtn" id="closeBtn">×</span> <div class="modal_title"> <h2>Modal Header</h2> </div> </div> <!-- End of modal_header --> <div class="modal_body"> <div class="modal_img" id="tactic"> </div> <div class="modal_details"> <div class="modal_tanks"> <p>Tanks</p> <ul> <li>3x Progetto</li> <li>5x Defender</li> <li>2x WZ-132</li> </ul> </div> <!-- End of modal_tanks --> <div class="modal_attacker"> <p>List of Attacker:</p> <ul> <li>[FAME]</li> <li>[OMNI]</li> <li>[G__G]</li> </ul> </div> <!-- End of modal_attacker --> </div> <!-- End of modal_details --> </div> <!-- End of modal_body --> </div> <!-- End of modal_content --> </div> </body> </html>
The second try was to use the image inside the html with a img tag. 第二次尝试是使用带有img标签的html内的图像。 This gives me the image in the full 512x512 size but it won't scale up or down based on the grid size. 这使我的图像具有512x512的完整尺寸，但不会根据网格尺寸进行放大或缩小。
img tag with grid view
带有网格视图的img标签
body { background: #EBEBEB; font-family: sans-serif; color: #343434; } .modal_content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "modal_header" "modal_content"; grid-gap: 25px; } .modal_header { background: #ACACAC; grid-area: modal_header; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "modal_title exit"; padding: 10px; padding-right: 25px; } .modal_title { grid-area: modal_title; justify-self: center; align-self: center; } .modal_closeBtn { grid-area: exit; justify-self: right; align-self: center; font-size: 30px; font-weight: bold; } .modal_body { grid-area: modal_content; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "modal_tactics modal_details"; align-items: center; justify-items: center; grid-gap: 50px; padding: 15px; } .modal_img { padding: 5px; grid-area: modal_tactics; width: 100%; height: auto; } .modal_details { font-size: 30px; grid-area: modal_details; display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/modal.css"> <title>Document</title> </head> <body> <div id="simpleModal" class="modal"> <div class="modal_content"> <div class="modal_header"> <span class="modal_closeBtn" id="closeBtn">×</span> <div class="modal_title"> <h2>Modal Header</h2> </div> </div> <!-- End of modal_header --> <div class="modal_body"> <div class="modal_img" id="tactic"> <img src="http://placekitten.com/512/512" alt=""> </div> <div class="modal_details"> <div class="modal_tanks"> <p>Tanks</p> <ul> <li>3x Progetto</li> <li>5x Defender</li> <li>2x WZ-132</li> </ul> </div> <!-- End of modal_tanks --> <div class="modal_attacker"> <p>List of Attacker:</p> <ul> <li>[FAME]</li> <li>[OMNI]</li> <li>[G__G]</li> </ul> </div> <!-- End of modal_attacker --> </div> <!-- End of modal_details --> </div> <!-- End of modal_body --> </div> <!-- End of modal_content --> </div> </body> </html>
Since those are the only 2 options I could come up with and I couldn't fix them or at least bend them so they would work I would be very glad for the help. 由于这些是我可以提出的仅有的两个选项，因此我无法固定它们或至少将它们弯曲以使它们起作用，因此我很高兴获得帮助。
Update: It seems like the image is using the full height of the grid-row which is good. 更新：看起来图像正在使用网格行的整个高度，这很好。 Is there the possibility that you have to solve this by resizing the row of the grid? 您是否有可能需要通过调整网格的行大小来解决此问题？
My project where I was using this can be found under this Github Link You can see this with the minimaps resizing based on the available space. 您可以在此Github链接下找到我正在使用它的项目。您可以通过根据可用空间调整大小的小地图来查看此项目。 What they are not doing is keeping the aspect ratio but in that case that is acceptable. 他们没有做的是保持宽高比，但是在那种情况下这是可以接受的。
Even if I was changing the size of the row it would still create the same issue. 即使更改行的大小，它仍然会产生相同的问题。 An Idea: Using JavaScript to get the width of the image and then set the grid-template-row to this specific value. 一个想法：使用JavaScript获取图像的宽度，然后将grid-template-row设置为此特定值。
Breakthrough: 突破：
I simplified my HTML a bit in order to focus more on the problem. 我将HTML简化了一些，以更加关注此问题。 I removed the text and only kept the image. 我删除了文字，只保留了图片。
Then I tried to use 然后我尝试使用
height:100%;
width: auto;
instead of the other way around since this should dynamically change the height (which seems to be the main problem here). 而不是相反，因为这应该动态地改变高度（这似乎是这里的主要问题）。
This gave me the following view: 这给了我以下观点：
As it seems the height of the modal_content is to small so I added height:100vh; 看来modal_content的高度很小，所以我加了height:100vh; to it with left me with this code. 剩下的就是这个代码。
.modal_content {
display: grid;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "modal_header" "modal_content";
grid-gap: 25px;
}
Now the image scales the way I want it to when I'm resizing the frame. 现在，当我调整框架大小时，图像会按照我想要的方式缩放。 Important here is that it keeps the aspect ratio, shows all content, and maintains the gives padding. 在此重要的是，它可以保持长宽比，显示所有内容并保持填充。
The final code would then be this. 最终的代码就是这个。
body { background: #EBEBEB; font-family: sans-serif; color: #343434; } .modal {} .modal_content { display: grid; height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "modal_header" "modal_content"; grid-gap: 25px; } .modal_header { background: #ACACAC; grid-area: modal_header; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "modal_title exit"; padding: 10px; padding-right: 25px; } .modal_title { grid-area: modal_title; justify-self: center; align-self: center; } .modal_closeBtn { grid-area: exit; justify-self: right; align-self: center; font-size: 30px; font-weight: bold; } .modal_body {} .modal_img { margin: 50px; height: 100%; width: auto; background: url("http://placekitten.com/512/512"); background-size: contain; background-position: center; background-repeat: no-repeat; } .modal_details { font-size: 30px; grid-area: modal_details; display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/modal.css"> <title>Document</title> </head> <body> <div id="simpleModal" class="modal"> <div class="modal_content"> <div class="modal_header"> <span class="modal_closeBtn" id="closeBtn">×</span> <div class="modal_title"> <h2>Modal Header</h2> </div> </div> <!-- End of modal_header --> <div class="modal_body"> <div class="modal_img" id="tactic"> </div> </div> <!-- End of modal_body --> </div> <!-- End of modal_content --> </div> </body>
I really hope that this solves the problem and I'll start adding the other elements to give the final answer. 我真的希望这可以解决问题，并且我将开始添加其他元素以给出最终答案。 The only problem left here is to calculate the height I have to attach to the modal_body since this will probably change with the used aspect ratio (media_query). 这里剩下的唯一问题是计算我必须附加到modal_body的高度，因为这可能会随着所使用的宽高比（media_query）而改变。 Another reason why he correct height will be important is because I don't want any scrollbar inside the modal so it has to fit correctly. 他正确的身高之所以重要的另一个原因是，因为我不希望模态内有任何滚动条，所以它必须正确地适合。
2 个解决方案
解决方案1
0 2018-07-28 18:02:58
I think it's possible to expand the width of your background image by adding width and height to your modal_img class and declaring box-sizing style to it. 我认为可以通过向modal_img类添加宽度和高度并为其声明框大小样式来扩展背景图像的宽度。
See updated code below: 请参阅下面的更新代码：
body { background: #EBEBEB; font-family: sans-serif; color: #343434; } .modal_content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "modal_header" "modal_content"; grid-gap: 25px; } .modal_header { background: #ACACAC; grid-area: modal_header; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "modal_title exit"; padding: 10px; padding-right: 25px; } .modal_title { grid-area: modal_title; justify-self: center; align-self: center; } .modal_closeBtn { grid-area: exit; justify-self: right; align-self: center; font-size: 30px; font-weight: bold; } .modal_body { grid-area: modal_content; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "modal_tactics modal_details"; align-items: center; justify-items: center; grid-gap: 50px; padding: 15px; } .modal_img { padding: 50px; grid-area: modal_tactics; background: url("http://placekitten.com/512/512"); background-size: cover; background-position: center; width: 100%; height: 100%; background-repeat: no-repeat; box-sizing: border-box; } .modal_details { font-size: 30px; grid-area: modal_details; display: grid; grid-gap: 10px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/modal.css"> <title>Document</title> </head> <body> <div id="simpleModal" class="modal"> <div class="modal_content"> <div class="modal_header"> <span class="modal_closeBtn" id="closeBtn">×</span> <div class="modal_title"> <h2>Modal Header</h2> </div> </div> <!-- End of modal_header --> <div class="modal_body"> <div class="modal_img" id="tactic"> </div> <div class="modal_details"> <div class="modal_tanks"> <p>Tanks</p> <ul> <li>3x Progetto</li> <li>5x Defender</li> <li>2x WZ-132</li> </ul> </div> <!-- End of modal_tanks --> <div class="modal_attacker"> <p>List of Attacker:</p> <ul> <li>[FAME]</li> <li>[OMNI]</li> <li>[G__G]</li> </ul> </div> <!-- End of modal_attacker --> </div> <!-- End of modal_details --> </div> <!-- End of modal_body --> </div> <!-- End of modal_content --> </div> </body> </html>
解决方案2
0 2018-07-29 19:25:07
The solution is to set the height of the modal_content so the image has a space to fill. 解决方案是设置modal_content的高度，以便图像有空间可填充。 You just have to scale the image with. 您只需要缩放图像即可。
.modal_img {
grid-template-areas: tactic;
margin: 25px;
height: 100%;
width: auto;
background: url("http://placekitten.com/512/512");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
and it works fine. 而且效果很好。
Then you only have to add the other elements and you'll get the final result. 然后，您只需添加其他元素，便会得到最终结果。
body { background: #EBEBEB; font-family: sans-serif; color: #343434; } .modal_content { display: grid; height: 85vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "modal_header" "modal_content"; } .modal_header { background: #ACACAC; grid-area: modal_header; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "modal_title exit"; padding: 10px; padding-right: 25px; } .modal_title { grid-area: modal_title; justify-self: center; align-self: center; } .modal_closeBtn { grid-area: exit; justify-self: right; align-self: center; font-size: 30px; font-weight: bold; } .modal_body { grid-template-columns: 1fr 1fr; grid-template-areas: "tactic details"; display: grid; height: 100%; } .modal_img { grid-template-areas: tactic; margin: 25px; height: 100%; width: auto; background: url("http://placekitten.com/512/512"); background-size: contain; background-position: center; background-repeat: no-repeat; } .modal_details { margin: 25px; height: 100%; grid-area: details; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; align-items: center; justify-items: center; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/modal.css"> <title>Document</title> </head> <body> <div id="simpleModal" class="modal"> <div class="modal_content"> <div class="modal_header"> <span class="modal_closeBtn" id="closeBtn">×</span> <div class="modal_title"> <h2>Modal Header</h2> </div> </div> <!-- End of modal_header --> <div class="modal_body"> <div class="modal_img" id="tactic"> </div> <div class="modal_details" id="modal_details"> <div id="modal_attacker"> <p>Attacker</p> <ul> <li>OMNI</li> <li>FAME</li> <li>G__G</li> </ul> </div> <div id="Tanks"> <p>Tanks</p> <ul> <li>4x Defender</li> <li>4x Progetto</li> <li>2x WZ-132</li> </ul> </div> </div> </div> <!-- End of modal_body --> </div> <!-- End of modal_content --> </div> </body>
This solves the problem even though I am not exactly sure why. 即使我不确定为什么也可以解决问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.