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=" ...
随机推荐
- Django中过滤的实现
过滤模块 安装 >: pip install django-filter 注册应用:settings/dev.py INSTALLED_APPS = [ # 列表过滤模块 'django_fil ...
- nginx + php-fpm 搭建owncloud
本文首发:https://www.cnblogs.com/somata/p/NgnixAndPhp-fpmBuildOwncloud.html 今天新研究的nginx,用owncloud来测试一下学的 ...
- tcp的三次握手和四次挥手(二)
一.三次握手 三次握手概念 当面试官问你为什么需要有三次握手.三次握手的作用.讲讲三次握手的时候,我想很多人会这样回答. 首先很多人会先讲下握手的过程: 第一次握手:客户端给服务器发送一个 SYN 报 ...
- Codeforces Round #524 (Div. 2) Masha and two friends矩形
题目 题意: 给一个n*m块大的黑白相间的矩形,在这个举行中操作,要先把第一个矩形(左下角坐标(x1,y2),右上角坐标(x2,y2)) 全部涂成白色,再把第二个矩形(左下角坐标(x3,y3), ...
- 【二叉搜索树】PAT-天梯赛- L2-004. 这是二叉搜索树吗?
大致题意: 一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点的键值: 其右子树中所有结点的键值大于等于该结点的键值: 其左右子树 ...
- angular ionic 解决微信页面缓存问题
# 在路由对应的页面路径后面加时间戳 .state('viewName', { url: '/viewName', cache: false, templateUrl: function(){ ret ...
- python练习题(三)
题目: 一.二选一 1.每个区生成1个符合身份证规则的身份证号码 2.随机生成10个符合身份证规则的身份证号码 二.要求: 1.身份证属于南京市 2.出生日期为1980-1-1 至 2019-8-1的 ...
- Oracle数据库 — DDL:数据定义语言
1.数据定义语言:用于定义数据库的结构,比如创建.修改或删除数据库对象: 包括: CREATE TABLE:创建数据库表:创建表的命名规则: 2.以字母开头:在 1–30 个字符之间:只能包含 A–Z ...
- Elasticsearch 使用:创建、插入、查询、更新、删除
Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Lucene 可能是目前存在的,不论开源还是私有的,拥有最先进,高性能和全功能搜索 ...
- php+超大文件上传
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...