固定宽高域中缩略图的自适应

图片必须使用一个块级元素进行包裹，样式如下：

.img-parent{
　  width:50px;　　
     height:50px;
}
.img-parent>img{
     max-width:100%;
     max-height:100%;
}

达到如下效果：

原文地址：https://www.cnblogs.com/Brose/p/thumbnail_resize.html

时间： 2024-10-11 11:02:19

固定宽高域中缩略图的自适应的相关文章

在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

此场景适用于移动端百分比布局,背景全屏显示. 在一个没有固定宽高的容器中设置背景,想要背景全屏显示,设置宽高100%后还需设置position:absolut; 原因: absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值. 而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出

css如何实现未知宽高div中图片垂直水平居中效果

css如何实现未知宽高div中图片垂直水平居中效果:在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果.代码如下:实例一: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

CSS实现垂直水平居中的三个方法：(1)固定宽高 (2)不固定宽高 (3)Flex

这两天迷上逛一些前端技术网站和论坛了,据说学前端要学会记录才能加深印象,所以有事没事还是写些随笔吧. 以前还在一个公司的面试试卷里做到过: 垂直居中: 1.父元素设置position:relative, 子元素设置position:absolute; top:50%; margin-top: -元素高度 2.height: 500px; line-height: 500px; 水平居中: 1.text-align:center 2.margin: 0 auto; 以上是我之前写的答案,接下来看看

【实习项目记录】(三)调整网络图片固定宽高

很多时候服务器端传过来的图片大小不统一.在ImageView里面设置这个属性可以让图片显示的时候统一大小. android:scaleType="centerCrop" android:scaleType是控制图片如何resized/moved来匹对ImageView的size. android:scaleType值的意义区别: CENTER /center  按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示 CENTER_CROP / cent

.NET 等宽、等高、等比例、固定宽高生成缩略图 类

根据原图片生成等比缩略图 #region 根据原图片生成等比缩略图 /// <summary> /// 根据源图片生成缩略图 /// </summary> /// <param name="imgPath_old">源图(大图)物理路径</param> /// <param name="imgPath_new">缩略图物理路径(生成的缩略图将保存到该物理位置)</param> /// <p

一个根据宽高补白的缩略图

<?php //获取原图的目录$file='./src.jpg'; //有一个原图创建一个新的图像$file_img=imagecreatefromjpeg($file);//缩略图的大小$temp_w=100;$temp_h=100;//创建缩略图的画布$temp_img=imagecreatetruecolor($temp_w, $temp_h); //填充颜色$bg_color=imagecolorallocate($temp_img,0xff, 0xff, 0xff);imagefill

DIV设置了固定宽高出现文字(文本)的不能自动换行

如果你的div设置了固定的width和height,有时会出现文字不能自动换行的情况 查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏览器会认为这是一个特别长的单词: 解决方法: 1. 在文本适当位置加空格 2. css代码中加上这行:word-wrap:break-word;

base64转byte[]、byte[]转base64、byte[]转图片后图片按固定宽高缩放

/**     * 图片缩放     */    public static BufferedImage ImageStringByte(int width, byte[] b) {                InputStream buffin = new ByteArrayInputStream(b);        BufferedImage src = null;        try {            src = ImageIO.read(buffin);        }