Question

我有一个图像标签，在一个部分中我设法使其与其余div很好地对齐。但是，当我调整窗口大小时，图像开始缩小或扩展。我可以在CSS中做什么以防止这种情况发生？

 .img-test {
     width: 33.87%; 
     position: absolute;
     max-width: none;
   } 

 .clothes {
    background-color: #d04925;
    float: right;
    height: 805px;
  }

具有.clothes类的图像和div彼此相邻，应该保持这种状态。

Answer 1

您需要将height属性设置为某个值，以防止图像调整大小。例子

.img-test{
         height: 200px;
         position: absolute;
         min-width: 300px;
         width: 33.87%; 
         }

这将有所帮助。除非图片位于高度正在变化的div内。

Answer 2

您可以使用max-width，min-width，max-height，min-height属性来防止图像调整大小。这是更多信息的链接。 w3schools

Answer 3

您好，欢迎来到StackOverflow！

您将图像设置为百分比值，换句话说，将其设置为父容器的一部分。因此，如果父容器缩小，则它的比例会变小，图像也会缩小！现在有防止这种情况的方法，您可以设置min-width，它定义了图像的最小宽度。因此它将缩小到这个宽度，但不会缩小到下面的宽度。

.img-test {
  width: 33.87%;
  min-width: 300px;
}

在此示例中，您的图片绝不会小于300px。您也可以省略min-width属性，并直接设置固定宽度。但是自从您提到过，设法使它“看起来不错”后，如果浏览器的视口太小，这很可能破坏整个UI。

因此，我建议考虑重新布置您的布局，如果该布局仅适用于某些特定宽度。一种方法是媒体查询。您可以在CSS中定义断点，如果视口变小（或变大），则将应用不同的CSS规则。您可以阅读有关此here和here的更多信息。

只是一小部分主题外的补充： max-width的默认值为none，并且它不是继承的，因此没有理由将其设置为该值

窗口开始调整大小时防止图像调整大小

3 个答案: