我试图创建一个HTML模式,我想先在一个外部文件中创建基本HTML和CSS。
最终输出应该如下所示:
设计模拟
这里的目标是让小地图在保持纵横比的同时,随模态的大小而缩放。
这是为游戏世界的坦克和地图应该总是尽可能大(不削减任何部分的形象)。
我的第一个想法是把地图作为背景。
background-size: cover;
background-position: center;
这是我的第一个想法,因为我以前在另一个应用程序中使用过它,它工作正常。这里的问题是图像没有使用网格所给的所有空间。
图像作为背景的网格视图
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>
第二次尝试是在html中使用带有
img
标记的图像。这给了我完整的512x512大小的图像,但它不会根据网格大小放大或缩小。
带网格视图的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>
因为这是我唯一能想到的两个选择,我不能修复它们,或者至少弯曲它们,这样它们就会工作,我会很高兴得到帮助。
更新:
看起来图像使用的是网格行的全高,这很好。是否有可能通过调整网格行的大小来解决此问题?
我使用这个的项目可以在Github Link
您可以通过根据可用空间调整小地图的大小来看到这一点。
他们没有做的是保持长宽比,但在这种情况下,这是可以接受的。
即使我改变了行的大小,也会产生同样的问题。
一个想法:
使用JavaScript获取图像的宽度,然后将
grid-template-row
设置为此特定值。突破:
我把HTML简化了一点,以便更专注于这个问题。
我删除了文本,只保留了图像。
然后我试着用
height:100%;
width: auto;
而不是相反的方式,因为这应该动态地改变高度(这似乎是这里的主要问题)。
这给了我以下的看法:
因为看起来
modal_content
的高度很小,所以我在这里添加了height:100vh;
并留下了这段代码。.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;
}
现在,当我调整帧的大小时,图像按我所希望的方式缩放。
这里很重要的一点是,它保持了纵横比,显示了所有内容,并保持了gives padding。
最后的密码就是这个。
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>
我真的希望这能解决问题,我将开始添加其他元素来给出最终答案。
这里剩下的唯一问题是计算我必须附加到model_body的高度,因为这可能会随着使用的纵横比(media_query)而改变。
另一个原因,他正确的高度将是重要的,因为我不想任何滚动条内的模式,所以它必须正确地适应。
最佳答案
我认为可以通过在modal_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: 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>
关于javascript - CSS网格中的图像不会调整为最大尺寸。尺寸,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51573665/