问CSS网格中的图像不会调整到最大。大小
EN

Stack Overflow用户

提问于 2018-07-29 01:24:23

回答 2查看 1.4K关注 0票数 2

我正在尝试创建一个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>

第二次尝试是将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">&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设置为这个特定值。

Breakthrough:

我简化了我的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)的变化而改变。另一个原因，他正确的高度将是重要的，因为我不想任何滚动条内的模式，所以它必须适合正确。

javascript

html

css

css-grid

image-scaling

回答 2

Stack Overflow用户

发布于 2018-07-29 02:02:59

我认为可以通过向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>

票数 0

Stack Overflow用户

发布于 2018-07-30 03:25:08

解决方案是设置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>

这解决了问题，尽管我不能确切地确定原因。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51573665

复制

相似问题

问CSS网格中的图像不会调整到最大。大小
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格中的图像不会调整到最大。大小EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格中的图像不会调整到最大。大小
EN