避免在CSS八边形容器中进行图像拉伸

Question

当我更新八角形的背景图像时，它似乎已经拉伸了它。以前，使用相同的CSS和不同的图像，这是正常的。

这是原始照片。如你所见，它没有被拉伸：

这是拉伸的八角形照片：

以下是影响八边形图像的所有代码：

img[Attributes Style] {
    width: 300px;
    height: 300px;
}

* {
    box-sizing: border-box;
}

.octo {
    transform: rotate(45deg);
}

.octo1 {
    transform: rotate(-45deg);
}

.octo,
.octo div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

<div class="octo">
    <div class="octo1">
        <img src="https://i.stack.imgur.com/5voQJ.jpg" alt="" width="300" height="300" />
    </div>
</div>

Answer 1

而不是使用<img>，将图像包含为background-image用于<span>元素，并在其上使用background-size: cover。要定位图像，请调整background-position值。

.octo-image {
     display: block;
     width: 300px;
     height: 300px;
     background-position: center center;
     background-size: cover;
}

* {
     box-sizing: border-box;
}

.octo {
     transform: rotate(45deg);
}

.octo1 {
     transform: rotate(-45deg);
}

.octo, .octo div {
     margin: 0 auto;
     transform-origin: 50% 50%;
     overflow: hidden;
     width: 300px;
     height: 300px;
}

<div class="octo">
     <div class="octo1">
          <span class="octo-image" style="background-image: url('https://i.stack.imgur.com/5voQJ.jpg')"></span>
      </div>
</div>

或者，你也可以使用<img>和object-fit: cover，但是你必须使用polyfill来支持IE11及更老版本：

.octo-image {
     width: 300px;
     height: 300px;
     object-fit: cover;
     object-position: center center;
}

* {
     box-sizing: border-box;
}

.octo {
     transform: rotate(45deg);
}

.octo1 {
     transform: rotate(-45deg);
}

.octo, .octo div {
     margin: 0 auto;
     transform-origin: 50% 50%;
     overflow: hidden;
     width: 300px;
     height: 300px;
}

<div class="octo">
     <div class="octo1">
          <img class="octo-image" src="https://i.stack.imgur.com/5voQJ.jpg"></span>
      </div>
</div>

Answer 2

使用方形源图像，而不是横向矩形。指定图像的高度和宽度会强制它成为正方形。由于它是风景图像，因此您的图像将在水平方向上被压扁并在垂直方向上拉伸。这与您的八角形造型无关。请参阅下面的示例：

<img src="https://i.stack.imgur.com/oiEvT.png" height="300" width="300" />

Answer 3

或者，如果你不能使用背景图像，你可以使用clip-path属性来绘制具有更清晰标记和完全响应行为的八边形

Codepen demo

标记

<figure>
  <img src="https://i.stack.imgur.com/5voQJ.jpg" alt=""/>
</figure>

CSS

/*
 * The outer wrapper defines the shape and hides the overflow of the
 * inner image. The max-width ensures the responsiveness.
 */
figure {
  position: relative;
  max-width: 300px;
  overflow: hidden;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 
                     70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* 
 * This pseudoelement ensures to keep the correct aspect ratio 
 * through the padding-bottom property. Since the image should be 
 * squared, the padding must be 100% of the element width
 */
figure::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

/*
 * Finally the image must be properly centered (it requires some 
 * adjustment if the subject it's not aligned in its canvas), 
 * the height is 100% of its container but the width is not 
 * specified so the image can scale, keeping its natural 
 * aspect ratio 
 */
img {
  position: absolute;
  left: 45%;
  height: 100%;
  transform: translateX(-50%);
}

---

最后结果