避免在图像 css 上拉伸

Posted 2023-03-06

【中文标题】避免在图像 css 上拉伸

【英文标题】：Avoid stretch on image css

【发布时间】：2013-04-17 03:51:54

【问题描述】：

我正在将图像渲染成div。我想避免拉伸我的图像。

div 
  height: 300px;
  width: 300px; 

img 
  min-width: 300px;
  min-height: 300px;
  max-height: 300px;   

我的问题是我的图像宽度拉伸。我希望它具有常规宽度，即使图像的某些部分会丢失。

div 
  height: 300px;
  width: 300px; 
  overflow: hidden;

img 
  height: 300px
  max-width: none;
  min-width: 300px;

【问题讨论】：

你设置了min-width，表示最小宽度为300px。你的意思是max-width？

如果您希望图像自动宽度，请不要在其上放置任何样式。

我的图片宽度必须至少为 300 像素。填写div。

图片的尺寸是多少？

不起作用。然后它填写宽度，但不填写高度。

【参考方案1】：

==>如果您要固定高度并且不想拉伸宽度

div 
  height: 300px;
  width: 300px; 
  overflow: hidden;

img 
  height: 300px

==>如果您要固定宽度并且不想拉伸高度

div 
   height: 300px;
   width: 300px; 
   overflow: hidden;

img 
 width: 300px

【参考方案2】：

为了让它像使用 300px 一样更灵活：

图片 宽度：100%； 适合对象：封面；

高度自动调整

【参考方案3】：

您只需添加object-fit: cover; 即可实现此目的。一个例子可能是 -

img 
    height: 300px
    width: 100%;
    object-fit: cover;

【讨论】：

如果您想保持最小/最大宽度和高度，这是一个很好的解决方案，这对于将英雄图像设置为 100vh 之类的事情很有用。我还发现这对于 Safari 在没有其他浏览器的情况下会挤压我的图像的情况很有帮助。

注意：IE11不支持object-fit。

【参考方案4】：

只需指定 max-width 100% 和 height :auto

【参考方案5】：

我会忘记设置最小高度和最大高度。只需将高度设置为 300 像素，并在 div 标签上隐藏溢出。这样，无论图像大小如何，它都将始终保持成比例，并且永远不会超出 div 标签的边界。

div  height: 300px; width: 300px; overflow: hidden; 
img  height: 300px; 

【参考方案6】：

您可以使用overflow:hidden 隐藏 div 宽度之外的图像的任何部分。

div 
       height: 300px;
       width: 300px; 
       overflow: hidden;
    
img 
       /*min-width: 300px;*/
       height: 300px;   
    

【参考方案7】：

使用max-width 而不是min-width，只需将height 设置为300px（或仅使用max-height）。

【参考方案8】：

如果您想避免拉伸最简单的方法（但保持原始宽度），请将图像作为 div 背景。