网格中的 IMG html css答案

【问题标题】：IMG in GRID html css网格中的 IMG html css
【发布时间】：2021-08-19 02:12:54
【问题描述】：

所以基本上我想要实现的是：

.row {
  display: -ms-flexbox;
  /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
  margin: 0% 20%;
}

.column {
  -ms-flex: 50%;
  /* IE 10 */
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 500px;
  height: 350px;
}

<div class="row">
  <div class="column">
    <img src="/images/classic.jpg">
    <img src="/images/deep.jpg">
  </div>
  <div class="column">
    <img src="/images/full.jpg">
    <img src="/images/relax.jpg">
  </div>
</div>

这就是我得到的。 result

所以，基本上 - 我是 html 和 css 的新手（如您所知），我只是不知道那里出了什么问题：/。

【问题讨论】：

似乎工作正常 - codepen.io/Paulie-D/pen/LYWeZmR

标签： html css image flexbox

【解决方案1】：

如果您的图像文件夹在您当前的路径中，您应该添加点“。”在你的斜线之前。像这样

 <img src="./images/classic.jpg">
 <img src="./images/deep.jpg">

【讨论】：

【解决方案2】：

CSS 文件

.row {
 display: -ms-flexbox; /* IE 10 */
 display: flex;
 -ms-flex-wrap: wrap; /* IE 10 */
 flex-wrap: wrap;
 padding: 0 4px;
 margin: 0% 20%;
}

.column {
 -ms-flex: 50%; /* IE 10 */
 flex: 50%;
 padding: 4px;
 text-align: center;
}

.column img {
 margin-top: 8px;
 vertical-align: middle;
 width: 100%;
 height: auto;
 border-radius: 10px;
}

你要知道px和¨% at with和hight的区别

【讨论】：