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属性绘制带有 cleaner 标记和完全响应的八边形>行为

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%);
}

最终结果

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

3 个答案: