时间戳

首页 > 解决方案 > 在 Jupyter 中使用 css 并排调整不同尺寸的图像

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

问题描述

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

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

![图像并排][( https://imgur.com/af9Xr3V )

下面我把我用来并排放置图像的 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>

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

标签： htmlcssimagejupyterjupyter-lab

解决方案

  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>

  1. 如果您不希望图像拉长但底部的文本位于正确的空间，请尝试此操作

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

我希望这就是你要找的

推荐阅读