Question

我想通过css进行缩放以放大容器内的图像，该容器的边界半径为50％，可以模拟圆形。

我想知道为什么我的解决方案不起作用，并在这里找到以下答案： picture with border-radius 50% and transform(scale)

我复制了代码并将其应用于我的代码，但该行为仍然存在。

有人知道为什么图像在转换时的列数为2的容器中会变成矩形吗？

.col {
  column-count: 2;
}

img{
  width: 100px;
  height: 100px;
}

.hopp_circle_img {
  width: 100px !important;
  height: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.hopp_circle_img img {
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
}

.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  transform: scale(1.25);
  -moz-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
}

Strange:<br />
<div class="col">
  <div class="hopp_circle_img">
    <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
  </div>
</div>

Works like charm:<br />
  <div class="hopp_circle_img">
    <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
  </div>

Answer 1

这是Chrome中的错误。在transform上添加一个（无用的）hop_circle_img来解决它。例如：

transform: translateX(0);

或

transform: translateY(0);

或

transform: scale(1);

以下是有关Chromium的一些相关错误的报告：

CSS：列数+转换+比例+过渡=奇怪的行为

1 个答案: