Html-Css 图像拉伸

Posted 2023-05-08

【中文标题】Html-Css 图像拉伸

【英文标题】：Html-Css image stretched

【发布时间】：2022-01-05 09:42:41

【问题描述】：

我正在使用 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 是否有问题，或者我应该将图像本身裁剪成某个比例？ 非常感谢您的帮助。

【问题讨论】：

我们无法访问该网站

如果你改变宽度和比例以保持不变，你应该有 height: auto; Here's 一个很好的例子来说明如何在保持比例的同时缩小图像的大小

@EthanAgar 我能够访问该网站。

【参考方案1】：

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。第二种解决方案??：

使用弹性！ （如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"  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" >
      <img class="back-face" src="slike/emoji-ji/zaprto.png" >
</div>

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

最后的想法

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

【参考方案2】：

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

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