Html-Css 图像拉伸

Question

我正在用 HTMl、CSS 和 JS 构建一个 memory 纸牌游戏来练习。 这是我到目前为止所做的： https://spomin.krix12.repl.co/如您所见，问号的图像和翻转卡片的图像有点拉伸。 这是它的 CSS 代码：

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 1px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

memory-card在memory-game里面。 如何修复拉伸的图像？ html（如果需要，我可以为您提供代码）或 css 是否有问题，或者我应该将图像本身裁剪成某个比例？ 我会很感激你的帮助。

Answer 1

您可以通过仅指定特定的宽度或高度（但不能同时指定两者）来防止图像拉伸。

您可能希望将图像包装在一个 div 中，该 div 的大小与parrent的大小相同，并将图像居中在其中（例如，使用带有justify-content: center;和align-items: center;的flexbox ）

Answer 2

1.第一种解决方案：

第一列是使用div标签来更改img ，这在可访问性方面可能是不可行的解决方案。 这就是我的做法：

<div class="back-face" style="
    height: 100%;
    background-image: url('slike/emoji-ji/zaprto.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
"></div>

2.第二种解决方案：

使用弹性！ （如下面提到的哈迪斯）将img放在div中，然后将该div设为display: flex; , 并将其内容转为align-items: center; . 反过来，图像需要一些属性来知道如何渲染width和height ，您可以根据需要进行调整。

<div class="back-face" style="display: flex;align-items: center;">
    <img src="slike/emoji-ji/zaprto.png" alt="zaprto" style="
    width: 100%;
    height: 50%; // or auto
">
</div>

3.第三个也是最好的解决方案：

让我们使用到目前为止所学的知识，并更改大量代码，如果您希望所有代码看起来都像第三个：步骤如下：

更改 CSS：

.memory-card {
    width: calc(25% - 10px);
    height: auto;
    margin: 1px;
    position: relative;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .5s;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
    /* add the following lines which used to be in img */
    border-radius: 5px;
    background: #1C7CCC;
    display: flex;
    align-items: center;
}

.front-face, .back-face {
    /* a few things removed */
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.front-face {
    transform: rotateY(180deg);
    /* add the following line to keep consistency */
    padding: 20px;
}

结果 html 将如下所示：

<div class="memory-card" data-framework="gospod" style="order: 4;">
      <img class="front-face" src="slike/emoji-ji/gospod.png" alt="vesel">
      <img class="back-face" src="slike/emoji-ji/zaprto.png" alt="zaprto">
</div>

几乎没有任何细微的变化！

最后的想法

• 请记住，在 html 中使用内联样式是一种反模式。 确保将提供的代码重构到您自己的 css 类中。