首页 > 其他分享 >css 图片 等比缩放

css 图片 等比缩放

时间:2022-10-14 20:46:01浏览次数:57  
标签:缩放 html 如下 宽度 css 图片

html

<div
style={{
width: '478px',
height: '361px',
background: '#252a38',
display: '-webkit-flex',
display: 'flex',
WebkitAlignItems: 'center',
alignItems: 'center',
WebkitJustifyContent: 'center',
justifyContent: 'center'
}}
>
<img src="dd.jpg" width=478 heitht=361 style={{
width: 'auto',
height: 'auto',
maxWidth: '100%',
maxHeight: '100%'
}}/>
</div>

结果如下

这样就根据 宽度 自适应 高度 啦

标签:缩放,html,如下,宽度,css,图片
From: https://www.cnblogs.com/ifnk/p/16792928.html

相关文章

  • CSS 卡片布局样式
     .table-flex{        align-items:center;        display:flex;        flex-wrap:wrap      } ......
  • 7. CSS颜色设置(6种方法)
    1.前言我们在显示屏上看到的各种颜色都是通过红(red)、绿(green)、蓝(blue)三原色组合而成的,按不同的比例混合这三种颜色就可以得到其它颜色,通过调整红、绿、蓝三种颜色的数值......
  • 图片懒加载
    <divclass="container"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic......
  • php简单实现 远程图片 上传
     思路:服务器A:上传文件,获取临时路径,然后获取base64字符串,将base64字符串发给服务器B服务器B:接受base64字符串,转码后使用file_put_contents添加到文件内,即可实......
  • 预览项目中所有文章中图片
    注意:不要在赋值之后(列表渲染)读取操作节点,因为异步的数据获取需要时间,节点来不及渲染到页面就去读取,是读取不到的-朱龙旭看世界-博客园(cnblogs.com) ......
  • CSS——box-sizing(固定宽度和高度)
    1.允许我们在元素的总宽度和高度中包括内边距和边框,这样可以控制最外总边框的宽度和高度。<!DOCTYPEhtml><html><head><style>.div1{width:300px;height:......
  • 图片添加水印倾斜、铺满最全工具类
    可以动态修改参数调整倾斜以及字体大小、颜色等。packagecom.seatrend.electronicrecord.utils;importsun.font.FontDesignMetrics;importjavax.imageio.ImageIO;......
  • 利用FastReport传递图片参数,在报表上展示签名信息
    在一个项目中,客户要求对报表中的签名进行仿手写的签名处理,因此我们原先只是显示相关人员的姓名的地方,需要采用手写方式签名,我们的报表是利用FastReport处理的,在利用楷体处......
  • Android加载PDF方案(pdf.js,支持缩放)
    都知道,Android本身的webview是不支持pdf加载的(比不上iOS的webview,谁让人家NB呢),因此通过连接Google的一个服务器转换成功后返回给WebView显示。但是,但是,但是呢,大家都懂的,天......
  • imagemagick:创建指定背景色的空图片(ImageMagick 6.9.10)
    一,用convert创建空图片1,执行命令[lhdop@blog~]$cdimg[lhdop@blogimg]$convert-size1024x768xc:"#FFF"./white.png[lhdop@blogimg]$convert-size1024x76......