我试图创建一个HTML模式,我想先在一个外部文件中创建基本HTML和CSS。
最终输出应该如下所示:
javascript - CSS网格中的图像不会调整为最大尺寸。尺寸-LMLPHP
设计模拟
这里的目标是让小地图在保持纵横比的同时,随模态的大小而缩放。
这是为游戏世界的坦克和地图应该总是尽可能大(不削减任何部分的形象)。
我的第一个想法是把地图作为背景。

background-size: cover;
background-position: center;

这是我的第一个想法,因为我以前在另一个应用程序中使用过它,它工作正常。这里的问题是图像没有使用网格所给的所有空间。
javascript - CSS网格中的图像不会调整为最大尺寸。尺寸-LMLPHP
图像作为背景的网格视图
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>

第二次尝试是在html中使用带有img标记的图像。
这给了我完整的512x512大小的图像,但它不会根据网格大小放大或缩小。
javascript - CSS网格中的图像不会调整为最大尺寸。尺寸-LMLPHP
带网格视图的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;

而不是相反的方式,因为这应该动态地改变高度(这似乎是这里的主要问题)。
这给了我以下的看法:
javascript - CSS网格中的图像不会调整为最大尺寸。尺寸-LMLPHP
因为看起来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。
javascript - CSS网格中的图像不会调整为最大尺寸。尺寸-LMLPHP
最后的密码就是这个。
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>

我真的希望这能解决问题,我将开始添加其他元素来给出最终答案。
这里剩下的唯一问题是计算我必须附加到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">&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>

关于javascript - CSS网格中的图像不会调整为最大尺寸。尺寸,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51573665/

10-12 12:20
查看更多