css “裁剪”图片(显示图片的一部分)
背景:朋友有一个需求,就是列表页显示的图片要做裁剪,不然不按比例缩小图片看起来就变形了。本来想好的解决办法是用PHP来生成缩略图,然而试了好几个开源缩略图类都没有一个满意的,突然想到为什么不直接用CSS呢?
<style>
#sample{
width:100px;
height:100px;
overflow:hidden;
position: relative;
border: 1px solid black;
}
</style>
<div id="sample">
<img src="150113-4.jpg" height="100px"/>
</div>
比如你有一张图片是400x300像素的,然后你的列表页要显示的宽高是100x100像素,这时候怎么办呢?
1. 先按比例缩小图片,即设置img标签的height="100px" ;
2. 裁剪, 设置包围img标签的div的宽高为100x100
3. done !!!
css “裁剪”图片(显示图片的一部分)的更多相关文章
- Matlab 如何/怎样 读取图片 显示图片 转换成灰度图
% 读取图片 im = imread('路径') >> im = imread('ny.png'); % 显示图片 imshow(im) >> imshow(im) % 转换成 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- 在VC6中基于dll开发插件用于各种图片显示(BMP/TGA/JPG/GIF/PNG/TIF/ICO/WMF/EMF/...)
一.图片显示 图片显示的方法: 1. 直接写程序 2. 第3方库 3. 调用COM组件的IPicture接口 4. 使用MFC的CPictureHolder类 5. 使用GDI+的CImag ...
- CSS控制显示图片的一部分
使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示. 假设我有纸张竖直方向的一张图片,竖直y轴方向分别是字母:A,B,C.... 现在分别要显示A.B.C 等字母,我们的CSS可以 ...
- 两种方法实现用CSS切割图片只取图片中一部分
切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性.下面有个不错的示例,大家可以参考下 切割图片这里不是真正的切割,只是用 ...
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- CSS中background:url(图片) 不能显示的问题
刚刚碰到一个奇怪的问题,这样一段CSS代码: .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
- CSS实现鼠标放图片上显示白色边框+文字描写叙述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [转]ionic或者angularjs中图片显示压缩问题解决 or 显示较大图片的某一块区域、裁剪显示
我们知道在html中显示图片一般都是用img控件标签,当然调整大小的也很容易. 但是会出现,特定的img大小,显示一张比较大尺寸的且长宽比例与特定img大小不相符的图片.而导致压缩问题,图片挤压的很严 ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
随机推荐
- [剑指Offer] 12.数值的整数次方
[思路1]递归 class Solution { public: double Power(double base, int exponent) { ){ /base; exponent = -exp ...
- npm+webpack+babel+react安装
npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...
- Thymeleaf 如何支持java8的时间LocalDate和LocalDatetime
一.添加依赖 <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thym ...
- 解决perm size out of memeory的问题
在idea中配置如下即可 -Xms1024m -Xmx1024m -XX:MaxNewSize=512m -XX:MaxPermSize=512m 如下图所示:
- APP本地服务安全测试
一.安全测试基本分类: 1.系统安全 系统加固 安全加固:比如linux中关闭telnet端口,修改ssh端口 检测一些不必要的服务(需要卸载一个ping)--保证系统的最小集 app安全加固:加一层 ...
- javascript中arguments的应用——不定项传参求和
<script type="text/javascript"> window.onload=function(){ function sum(){ var result ...
- 解决在极光推送的时候会出现一个 JPush提示:缺少统计代码
<span style="font-size:14px;"> @Override protected void onResume(){ super.onResume() ...
- mavne问题解决---Dynamic Web Module 2.3 or newer
一:前沿 maven问题的bug,其实是很烦人的,因为每次都是很纠结的去改这个bug,特别的烦人,这个bug也是使得我纠结了好久的,那个星期五自己搞了几个小时都没有解决下,之后星期一来百度Google ...
- Hibernate中inverse、cascade的说明
一: 前沿:刚刚学习hibernate时,对于inverse很是纠结,不知道什么时候该用什么时候不该用,在网上找了一些资料,说的也很含糊,我都不知道如果写了"inverse=true&quo ...
- 动态规划:状压DP-斯坦纳树
最小生成树是最小斯坦纳树的一种特殊情况 最小生成树是在给定的点集和边中寻求最短网络使所有点连通 而最小斯坦纳树允许在给定点外增加额外的点,使生成的最短网络开销最小 BZOJ2595 题意是给定一个棋盘 ...