用min-width/max-width实现图片缩放裁切

简介:
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=gbk" http-equiv="Content-Type" />
<title>min-width/max-width控制图片缩放裁切</title>
<style type="text/css">
img{border:none;display:block;}
div
{
  margin:20px auto;
  background-color:#f0f6f9;
  border:1px solid #606669;  
}
#div1
{
  width:150px;
  height:200px;
  overflow:hidden;  
}
#div1 img
{
  min-width:150px;
  min-height:200px;    
}
</style>
</head>

<body>
  <div id="div1">
    <a href="#"><img src="test.jpg" alt="" /></a>
  </div>
</body>

</html>








 本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/155890,如需转载请自行联系原作者


相关文章
|
20天前
|
编解码 UED
媒体查询中 max-width 和 min-width 属性的作用
【10月更文挑战第24天】可以结合其他媒体特性,如高度、分辨率等,来进一步优化和定制媒体查询的效果。通过对这些属性的深入理解和灵活运用,我们能够更好地应对不同屏幕尺寸带来的挑战,打造出适应各种环境的优秀设计作品。
|
前端开发
常用单位 px像素 %百分比 rem em vw vh pt磅值
常用单位 px像素 %百分比 rem em vw vh pt磅值
|
1月前
|
前端开发
min-width/max-width 和 min-height/max-height 属性间的覆盖规则
在CSS中,min-width/max-width及min-height/max-height属性用于控制元素的最小和最大尺寸。当min-width与max-width或min-height与max-height属性同时设置时,若它们的值有冲突,max-width和max-height具有更高的优先级。这意味着元素的实际宽度和高度将受限于max-width和max-height的规定,而min-width和min-height则确保了元素不会小于所设定的最小尺寸。
|
17天前
|
前端开发 容器
max-height 属性和 min-height 属性有什么区别?
【10月更文挑战第27天】`max-height`属性和`min-height`属性在控制元素高度方面各有特点和适用场景,通过合理地运用这两个属性,可以更灵活地实现各种页面布局效果,满足不同的设计和功能需求。
|
6月前
|
XML 存储 编解码
svg的viewBox、width和height的设置说明
svg的是没有边界的,svg画布只是用于展示svg世界中某一个范围的内容,而对于超过了svg画布范围的内容,则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
|
Web App开发 前端开发
给Img标签设置height和width属性
给Img标签设置height和width属性
701 0
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
82 0
|
前端开发
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
240 0
响应式 - 基于min-width和max-width属性的响应式布局
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
510 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
ListView列宽自适应,设置ListView.Column[0].Width := -1;
使用TListView列表显示内容,如果列内容过长,就会显示成‘XXX…’形式,此时如果双击列标题,列宽将变为自适应。用代码设置如下: 1、设置ListView.Column[0].Width := -1;//列宽根据列内容自适应,此时保证列内容都可见。
3107 0