jquery Html-Css图像已拉伸

aor9mmx1 于 2022-11-03 发布在 jQuery

关注(0)|答案(2)|浏览(184)

我正在用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中有问题吗？或者我应该裁剪图像本身到某个比例？我将感谢你的帮助。

jquery

来源：https://stackoverflow.com/questions/70139481/html-css-image-stretched

2条答案

按热度按时间

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;。反过来，图像需要一些属性来了解如何渲染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类中。

赞(0）回复(0）举报 2022-11-03

6ju8rftf2#

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

赞(0）回复(0）举报 2022-11-03

我来回答

jquery Html-Css图像已拉伸

2条答案

1.第一个解决方案：

2.第二种解决方案：

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

相关问题

热门标签

最新问答