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;
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图片自适应组件的更多相关文章
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
- ReactNative学习-滑动查看图片第三方组件react-native-swiper
滑动查看图片第三方组件:react-native-swiper,现在的版本为:1.4.3,该版本还不支持Android. 下面介绍的是该组件的一些用法,可能总结的不完整,希望大家一起来共同完善. 官方 ...
- React入门实例:组件化+react-redux实现网上商城(1)
项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文 ...
- React之智能组件和木偶组件
智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是 ...
- React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- 【原】文本图片自适应高度小bug以及解决办法
自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中
- React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...
- Android ImageView图片自适应 (转)
网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView android:id=" ...
随机推荐
- Linux proc filesystem (procfs)
参考:/proc /proc简介 本文着重关注/proc目录,查看其中文件并熟悉它. /proc目录存在于所有Linux系统上,无论什么发行版或体系结构.首先,必须澄清一个误解: 就文件系统这一术语而 ...
- Luogu P1294 高手去散步
Luogu P1294 高手去散步 因为数据较小,所以用邻接矩阵存图即可. 将1号点到$t$号点分别设为起点,深搜遍历路线,开一个$vis$数组,记录每一个点是否被访问过.每次求出从当前起点出发的最大 ...
- P3205 [HNOI2010]合唱队[区间dp]
题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为Hi米(1000<=Hi<= ...
- 安装pytest
1.安装pytest 2.执行一个用例 进入测试用例目录下,运行以test开头的一个用例. 执行成功. 备注:1.其实测试函数或方法只要以test开头就可以被运行的2.测试文件的名字,其实可以是任意的 ...
- aiohttp 支持异步的网络请求模块
通常在进行网络数据采集时候我们会用到requests,urllib等模块,但是这些模块在使用中并不支持异步,所以今天我们介绍一个支持异步网络请求的模块aiohttp. 首先我们使用flask简单的搭一 ...
- Selenium常用API的使用java语言之8-模拟鼠标操作
通过前面例子了解到,可以使用click()来模拟鼠标的单击操作,现在的Web产品中提供了更丰富的鼠标交互方式, 例如鼠标右击.双击.悬停.甚至是鼠标拖动等功能.在WebDriver中,将这些关于鼠标操 ...
- celery指定任务执行时间
有业务线提出需求:要求对于其流量,只能在0点到7点扫描. 对此,celery发送任务到队列时可以指定执行的时间. 当worker收到任务后,判断还未到执行时间,会存储在worker中,在到达时候后再执 ...
- __str__()方法
只要定义了__str__(self)方法,那么就会打印从这个方法中return的数据 class Car: def __init__(self, newWheelNum, newColor): sel ...
- sqlserver 删除表数据
可以使用delete清空表delete from t表名 也可以使用truncate命令 truncate table 表名
- QT中使用pri子工程
QT中使用pri子工程 使用子工程的作用是使得工程结构更加清晰,举个例子: 我制作了一个自定义控件,具备通用性,我打算把它用在日后的工程中.制作的这个控件需要用到头文件h.源文件c,资源文件qrc.图 ...