zoukankan      html  css  js  c++  java
  • react图片自适应组件

    import * as React from 'react';
    import 'animate.css/animate.css'
    import {AutoImg} from "./style";
    import {observer} from "mobx-react";
    import {action} from "mobx";
    import {IAd} from "../../util/type";
    
    interface IIndexProps {
        url: string;
        row:boolean;
        number;
        height:number;
    }
    
    @observer
    class Index extends React.Component<IIndexProps> {
    
        constructor(props) {
            super(props);
        }
    
        public render() {
            const {url,row,width,height} = this.props;
            return (
                <div style={{`${width}px`,height:`${height}px`,overflow: 'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
                    {
                        row
                            ?
                            <img src={url} style={{'auto',height:'100%'}} alt=""/>
                            :
                            <img src={url} style={{'100%',height:'auto'}} alt=""/>
                    }
                </div>
            );
        }
    }
    
    export default Index;
    

      

  • 相关阅读:
    软件测试课堂练习1
    安卓增删改查
    安卓数据库表
    安卓注册登录
    安卓购物清单
    安卓计算器
    第四周安卓作业
    第七周作业
    jsp第六周
    第四次jsp作业
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/11231749.html
Copyright © 2011-2022 走看看