有几个方法，各有优劣 你自己斟酌，部分也说不细需要你自己百度具体做法：
定死宽高中的一个，另一个未定死的数值就会按比例来，如果多了overflow切掉，好处是容易 *** 作，兼容性好，坏处很多，内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。
设为背景图使用css3的background-size配合background-position来解决，contain和cover两个值效果不错，基本能解决你想要的所有效果，缺点是不兼容低版本浏览器、需要通过内联css样式解决、不是img标签浏览器搜索引擎不友好、不符合HTML语义化标准。
使用css3的flex定位，网上有具体的 *** 作，一时说不明白都是用得到的时候自己去搜。好处是完全语义化符合标准，基本能解决你的问题，缺点是，学习成本高，兼容性稍差，有些手机上表现有问题。
js方案，都js了自己写就是了。缺点是需要用js，写不好会有bug，相对麻烦一些，加载时候页面可能会有抖动。
服务器方案，客户上传的到服务器走一圈，做成自己希望的大小，而且有一个服务器插件不仅可以截取到目的大小而且还能针对内容截取（例如尽可能保留人物面部、智能判断页面重点），这个试过效果很不错，不过具体哪个插件不记得了，估计搜也能搜到。优点是比较智能自己设置好了几乎完美，几乎不再需要麻烦的css，页面也相对比较规整，缺点是需要服务器端支持。
如果可以比拘泥于容器，让容器兼容，网上有很多的gallery插件，类似谷歌，摆布也不错，优点是不用考录和div的问题了，缺点是需要从新设计及相关技术
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml。
2、在indexhtml中的<style>标签中，输入css代码：
div{width: 300px;height: 150px;background-image: url(small3png);background-size: 100%}
3、浏览器运行indexhtml页面，此时背景充满了div的大小。
在的CSS中直接定义宽度和高度即可，比如一个class为tupian的，在CSS里的定义就可以这样定义：tupian img{width:50px;height:50px;}
也可以在html中定义，比如<img src="images/logopng" width="50" height="50" /}" />这样就能设置长宽为50px。
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
可以使用：Background-size属性
语法：
background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
取值：
<length>：
由浮点数字和单位标识符组成的长度值。不可为负值。
<percentage>：
取值为0%到100%之间的值。不可为负值。
说明：
设置背景的大小。
指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对进行伸缩。
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Strict//EN" ">欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）