在 Jupyter 中使用 css 并排调整不同尺寸的图像

Question

我正在尝试将两张图片并排放置在 Jupyter 的降价单元格中。但是这两张图片有不同的尺寸，我无法让它们的尺寸完全相同。

我的目标是无论大小如何，图像都具有相同的比例。在我放在这里的图片中，您可以看到 "fig 2" 的高度与 "fig 1" 的尺寸不匹配。

下面是我用来并排放置图像的 CSS 和 HTML 代码。

代码：

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  height: auto;
  padding: 3px;
  text-align: center;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  object-fit: fill;
  overflow: hidden;
  vertical-align: top;
}


}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="column">
  <a id="fig1" href="./../../Images/r-project.png">
    <img src="https://imgur.com/opaKw3b" alt="R-Proyect" style="width:100px height:100px"/>
    </a>
  <figcaption>Fig 1</figcaption>
</div>
<div class="column">
  <a id="fig2" href="./../../Images/cran.png">
    <img src="https://imgur.com/iYnTl8H" alt="CRAN" style="width:50% height:100px">
    </a>
  <figcaption>Fig 2</figcaption>
</div>

我希望你能帮我解决这个小问题。谢谢

Answer 1

如果您的图片具有不同的高度和宽度，并且您希望图片拉长其高度，则需要提及图片的高度。

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  height: 500px;
  padding: 3px;
  text-align: center;
  background-position: 50% 50%;
  overflow: hidden;
  vertical-align: top;
}

img{
height:400px;
}

}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="column">
  <a id="fig1" href="./../../Images/r-project.png">
    <img src="https://dummyimage.com/600x400/000/fff" alt="R-Proyect" />
    </a>
  <figcaption>Fig 1</figcaption>
</div>
<div class="column">
  <a id="fig2" href="./../../Images/cran.png">
    <img src="https://dummyimage.com/400x200/f00/f0f" alt="CRAN">
    </a>
  <figcaption>Fig 2</figcaption>
</div>

如果您不希望图像变长但底部的文字在右侧 space 试试这个

.parent {
  display: flex;
}

.child {
  display: flex;
  text-align: center;
  width: 300px;
  flex-direction: column;
}

.imgholder {
  height: 400px;
  width:100%;
  background-size:cover 50% 50%;
  background-repeat:no-repeat;
  
}

<div class="parent">
  <div class="child">
    <div style="background-image:url(https://dummyimage.com/200x400/2222e6/fff)" class="imgholder">
    </div>
    <p>Fig1</p>
  </div>
  <div class="child">
    <div style="background-image:url(https://dummyimage.com/300x200/122666/fff)" class="imgholder">
    </div>
    <p>Fig2</p>
  </div>
</div>

希望这就是您要找的

在 Jupyter 中使用 css 并排调整不同尺寸的图像

Adjust images with different dimensions side by side with css in Jupyter

html

css

image

jupyter

jupyter-lab