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. Linux proc filesystem (procfs)

    参考:/proc /proc简介 本文着重关注/proc目录,查看其中文件并熟悉它. /proc目录存在于所有Linux系统上,无论什么发行版或体系结构.首先,必须澄清一个误解: 就文件系统这一术语而 ...

  2. Luogu P1294 高手去散步

    Luogu P1294 高手去散步 因为数据较小,所以用邻接矩阵存图即可. 将1号点到$t$号点分别设为起点,深搜遍历路线,开一个$vis$数组,记录每一个点是否被访问过.每次求出从当前起点出发的最大 ...

  3. P3205 [HNOI2010]合唱队[区间dp]

    题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为Hi米(1000<=Hi<= ...

  4. 安装pytest

    1.安装pytest 2.执行一个用例 进入测试用例目录下,运行以test开头的一个用例. 执行成功. 备注:1.其实测试函数或方法只要以test开头就可以被运行的2.测试文件的名字,其实可以是任意的 ...

  5. aiohttp 支持异步的网络请求模块

    通常在进行网络数据采集时候我们会用到requests,urllib等模块,但是这些模块在使用中并不支持异步,所以今天我们介绍一个支持异步网络请求的模块aiohttp. 首先我们使用flask简单的搭一 ...

  6. Selenium常用API的使用java语言之8-模拟鼠标操作

    通过前面例子了解到,可以使用click()来模拟鼠标的单击操作,现在的Web产品中提供了更丰富的鼠标交互方式, 例如鼠标右击.双击.悬停.甚至是鼠标拖动等功能.在WebDriver中,将这些关于鼠标操 ...

  7. celery指定任务执行时间

    有业务线提出需求:要求对于其流量,只能在0点到7点扫描. 对此,celery发送任务到队列时可以指定执行的时间. 当worker收到任务后,判断还未到执行时间,会存储在worker中,在到达时候后再执 ...

  8. __str__()方法

    只要定义了__str__(self)方法,那么就会打印从这个方法中return的数据 class Car: def __init__(self, newWheelNum, newColor): sel ...

  9. sqlserver 删除表数据

    可以使用delete清空表delete from t表名 也可以使用truncate命令 truncate table 表名

  10. QT中使用pri子工程

    QT中使用pri子工程 使用子工程的作用是使得工程结构更加清晰,举个例子: 我制作了一个自定义控件,具备通用性,我打算把它用在日后的工程中.制作的这个控件需要用到头文件h.源文件c,资源文件qrc.图 ...