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=" ...
随机推荐
- 基于Java+Selenium的WebUI自动化测试框架(九)-----基础页面类(BasePage)
上篇我们写了java读取xml文件的类,实现了可以从xml文件读取元素的方式.那么,接下来我们需要考虑一个问题.我们拿了这些元素之后怎么去操作呢? 先来看看我们手工测试的时候是怎么进行的. 双击浏览器 ...
- cmake下cmake_c_flags,add_definitions
cmake_c_flags用来设置编译选项 如 -g -wall(不展示警告) add_definitions 添加编译参数,比如add_definitions(-DDEBUG)将在gcc命令行添加D ...
- HttpReader
头文件: #pragma once #include <afxinet.h> class CSF_HttpDataReader { public: CSF_HttpDataReader(v ...
- 跟随一条insert语句, 进入TiDB的源码世界(上)
TiDB是Google F1的开源实现: TiDB实现了基于mvcc的乐观锁,在线表结构变更,基于时间戳的数据线性一致性,等等: 为了可靠性,TiDB和Oracle一样,维护了百万级别的自动化测试用例 ...
- PHP 创建 MySQL 表
CREATE TABLE 语句用于创建 MySQL 表. 创建表前,我们需要使用 use myDB 来选择要操作的数据库: use myDB; 我们将创建一个名为 "MyGuests&quo ...
- reCaptcha 新版,国内可无障碍使用
reCaptcha 新版,国内可无障碍使用 蓝小灰 Digital Sign® PKI 创始人/一点安全专栏主编 4 人赞同了该文章 如果你在使用一些网站看到下图,这就是由 Google 提供的 re ...
- SpringMVC拦截器及多拦截器时的执行顺序
本文链接:https://blog.csdn.net/itcats_cn/article/details/80371639拦截器的配置步骤 springmvc.xml中配置多个拦截器配置自定义拦截器并 ...
- Linux操作系统常用命令合集——第四篇-文件系统权限操作(5个命令)
1.umask [命令作用] 文件或目录创建时的遮罩码 [命令语法] umask [选项] [参数] [常用选项] -p --输出的权限掩码可直接作为指令来执行 -s --以符号方式 ...
- 爬虫(二):Urllib库详解
什么是Urllib: python内置的HTTP请求库 urllib.request : 请求模块 urllib.error : 异常处理模块 urllib.parse: url解析模块 urllib ...
- OpenCV:Python下OpenCV安装和入门最强详细攻略
一.关于OpenCV简介 OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它轻量级而且高效— ...