Question

我正在尝试创建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">&times;</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>

第二种尝试是使用带有img标签的html内的图像。这使我的图像达到了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">&times;</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;
}

现在，当我调整框架大小时，图像会按照我想要的方式缩放。在这里重要的是，它可以保持长宽比，显示所有内容并保持填充。

最后的代码就是这个。

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">&times;</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>

我真的希望这可以解决问题，我将开始添加其他元素以给出最终答案。这里剩下的唯一问题是计算我必须附加到modal_body的高度，因为这可能会随着所使用的宽高比（media_query）而改变。他正确的身高之所以重要的另一个原因是，我不希望模态内有任何滚动条，所以它必须正确地适合。

Answer 1

我认为可以通过向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">&times;</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>

Answer 2

解决方案是设置modal_content的高度，以使图像具有填充空间。您只需要缩放图像即可。

.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;
}

它工作正常。

然后，您只需添加其他元素，便会得到最终结果。

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">&times;</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>

即使我不确定为什么也可以解决问题。

CSS网格中的图像不会调整为最大尺寸。大小

2 个答案: