Question

我有一组图像，每个图像的大小略有不同。我希望能够创建具有特定最大大小的img个元素，但是当图像超出最大大小时，图像会被重新调整，而是从容器中“溢出”，就像它具有负数一样利润率。例如，如果我指定的最大宽度为10px，但是图像的宽度为12px，而不是将图像重新缩放到10px，则每侧会突出1px，与相邻元素重叠。这可以用纯CSS吗？

Answer 1

Em，可能是我没有得到它但是如果将.fix-seze应用于div和图像，则图像不会溢出。

<html>
  <head>
    <style type="text/css">
        .fix-size {
            max-width: 50px;
            max-height: 50px;
        }
    </style>
  </head>
  <body>
    <div class="fix-size">
        <img class="fix-size" src="test.png" />
    </div>
    <div class="fix-size">
        <img class="fix-size" src="test2.png" />
    </div>
    <div class="fix-size">
        <img class="fix-size" src="test3.png" />
    </div>
  </body>
</html>

Answer 2

由于您没有提供容器和图像类，我不确定您当前的课程有什么问题，但这是您可以做的：

将图像包装在容器中，您将在其中定义最大宽度，然后添加一个类，使图像的宽度为该容器的100％。 IE浏览器。我正在使用1000 x 1000图像。

更新：您可以将属性new_params = existing_user_params.merge(nested_donation_params)添加到容器类中，以确保没有重叠。

overflow: hidden;

.img__container {
  max-width: 20px;
  overflow: hidden;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

img的最大高度和宽度，带有负边距/溢出而不是缩放？

2 个答案: