jquery Html-Css图像已拉伸

aor9mmx1  于 2022-11-03  发布在  jQuery
关注(0)|答案(2)|浏览(183)

我正在用HTMl,CSS和JS构建一个记忆卡游戏来练习。这是我到目前为止所做的: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中有问题吗?或者我应该裁剪图像本身到某个比例?我将感谢你的帮助。

f87krz0w

f87krz0w1#

1.第一个解决方案:

第一列是在img的变化中使用div标记,这可能是一个不可行的解决方案可访问性方面。

<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.第二种解决方案:

使用flex!(如Hades mentioned below)将img放入div中,然后将div转换为display: flex;,并将其内容转换为align-items: center;。反过来,图像需要一些属性来了解如何渲染widthheight,您可以根据需要调整这些属性。

<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类中。
6ju8rftf

6ju8rftf2#

您可以只指定特定的长度或高度(但不能同时指定两者),以防止影像延伸。
您可能希望将图像 Package 在一个div中,该div的大小与parent的大小相同,并将图像居中放置在其中(例如,通过使用flexboxjustify-content: center;align-items: center;

相关问题