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

简介:
InBlock.gif
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
InBlock.gif<html xmlns="http://www.w3.org/1999/xhtml">
InBlock.gif
<head>
InBlock.gif<meta content="text/html; charset=gbk" http-equiv="Content-Type" />
InBlock.gif<title>min-width/max-width控制图片缩放裁切</title>
InBlock.gif<style type="text/css">
InBlock.gifimg{border:none;display:block;}
InBlock.gifdiv
InBlock.gif{
InBlock.gif  margin:20px auto;
InBlock.gif  background-color:#f0f6f9;
InBlock.gif  border:1px solid #606669;  
InBlock.gif}
InBlock.gif#div1
InBlock.gif{
InBlock.gif  width:150px;
InBlock.gif  height:200px;
InBlock.gif  overflow:hidden;  
InBlock.gif}
InBlock.gif#div1 img
InBlock.gif{
InBlock.gif  min-width:150px;
InBlock.gif  min-height:200px;    
InBlock.gif}
InBlock.gif</style>
InBlock.gif</head>
InBlock.gif
<body>
InBlock.gif  <div id="div1">
InBlock.gif    <a href="#"><img src="test.jpg" alt="" /></a>
InBlock.gif  </div>
InBlock.gif</body>
InBlock.gif
</html>

InBlock.gif








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


相关文章
|
7月前
|
前端开发
常用单位 px像素 %百分比 rem em vw vh pt磅值
常用单位 px像素 %百分比 rem em vw vh pt磅值
|
1月前
|
XML 存储 编解码
svg的viewBox、width和height的设置说明
svg的是没有边界的,svg画布只是用于展示svg世界中某一个范围的内容,而对于超过了svg画布范围的内容,则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
53 0
|
Web App开发 前端开发
给Img标签设置height和width属性
给Img标签设置height和width属性
503 0
|
Android开发
|
前端开发
响应式 - 基于min-width和max-width属性的响应式布局
响应式 - 基于min-width和max-width属性的响应式布局
200 0
响应式 - 基于min-width和max-width属性的响应式布局
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
389 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
|
编解码
px、em、rem区别 pt ppi dpi vw vh
px、em、rem区别 pt ppi dpi vw vh
129 0
px、em、rem区别 pt ppi dpi vw vh

热门文章

最新文章