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;
width: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:`${width}px`,height:`${height}px`,overflow: 'hidden',display:'flex',alignItems:'center',justifyContent:'center'}}>
{
row
?
<img src={url} style={{width:'auto',height:'100%'}} alt=""/>
:
<img src={url} style={{width:'100%',height:'auto'}} alt=""/>
}
</div>
);
}
} export default Index;

  

react图片自适应组件的更多相关文章

  1. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  3. ReactNative学习-滑动查看图片第三方组件react-native-swiper

    滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android. 下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善. 官方 ...

  4. React入门实例:组件化+react-redux实现网上商城(1)

    项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文 ...

  5. React之智能组件和木偶组件

    智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是 ...

  6. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  7. 【原】文本图片自适应高度小bug以及解决办法

    自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中

  8. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  9. Android ImageView图片自适应 (转)

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

随机推荐

  1. webpack中如何编写一个plugin

    loader和plugin有什么区别呢?什么是loader,什么是plugin. 当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引 ...

  2. IDEA实用教程(四)—— 创建JavaSE工程

    三. 创建JavaSE工程 第一步 第二步 第三步 第四步 第五步 第六步 运行代码.右键选中图中按钮 选择Run

  3. python-selenium安装笔记

    python-selenium操作火狐,谷歌,360,ie 亲测可用,windows环境 python3.6 由于python2到2020年不进行维护所有都用python3 selenium pip ...

  4. mysql安装笔记

    MySQL-mysql 8.0.11安装教程 - Laumians - 博客园  https://www.cnblogs.com/laumians-notes/p/9069498.html mysql ...

  5. python基础--文件控制

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  6. python练习题(三)

    题目: 一.二选一 1.每个区生成1个符合身份证规则的身份证号码 2.随机生成10个符合身份证规则的身份证号码 二.要求: 1.身份证属于南京市 2.出生日期为1980-1-1 至 2019-8-1的 ...

  7. MySQL 表查询

    表查询 前期准备一张表 create table emp( id int not null unique auto_increment, name varchar(32) not null, gend ...

  8. 2019-2020-1 20199312《Linux内核原理与分析》第二周作业

    c语言代码 // main.c int g(int x) { return x + 4; } int f(int x) { return g(x); } int main(void) { return ...

  9. c语言的函数指针

    简单定义并间接调用 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<time.h> void singas ...

  10. mac XXX 已损坏,打不开。 您应该将它移到废纸篓。

    mac 上的软件我改了某些配置,打开提示这个. 是因为安全认证问题. 在系统偏好设置里面,安全与隐私设置为允许任何来源就可以. 如果新版系统没有这个选项,那么在命令行输入:sudo spctl --m ...