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. SUSE CaaS Platform 4 - 使用 NFS 作为持久存储

    SUSE CaaS Platform 4 - 持久存储使用 NFS

  2. 用python批量插入数据到数据库中

    既然使用python操作数据库必不可少的得使用pymysql模块 可使用两种方式进行下载安装: 1.使用pip方式下载安装 pip install pymysql 2.IDE方式 安装完成后就可以正常 ...

  3. 数据库中的Schema到底是什么

    参考:http://database.guide/what-is-a-database-schema/ 在数据库中,schema(发音 “skee-muh” 或者“skee-mah”,中文叫模式)是数 ...

  4. 为0LTP选择RDMBS时,你都需要考虑哪些?

    我们经常需要为自己的OLTP(事务/运营)数据库选择适合的RDBMS(关系型数据库管理系统).虽然通过编写可移植的SQL可以暂时避免进行这样的选择,但迟早要做出这样的选择,至少需要进行这样的尝试(比如 ...

  5. 安装腾讯QQ问题记录

    安装腾讯QQ的时候遇到两个错误,记录一些解决方法 1.安装文件失败,请尝试手动卸载QQ或更改安装目录,再执行安装程序,错误码:0x00008013 问题原因:卸载QQ没有完全卸载,导致文件残留. 如果 ...

  6. m_strcpy

    自己实现strcpy函数 #include <stdio.h> #include <assert.h> //如果它的条件返回错误,则终止程序执行 char *m_strcpy( ...

  7. (一)python3.7的安装

    1.从官网https://www.python.org/下载相应版本的安装包.一般下载 executable installer,x86 表示是 32 位的,x86-64 表示 64 位的. 2.可选 ...

  8. 发布一个npm package

    1. 创建一个package.json文件 发布到npm registry的包必须包含一个packge.json文件. 1. 必需name字段 要求: 1. 只能是一个单词,但是可以包含-或_ 2. ...

  9. MongoDB 3.2变动一览

    3.2测试版本总算release了!E叔带大家来一览MongoDB 3.2版本的真容. (PS:内容比较多,在此仅针对个人认为比较重要的进行讲解,markdown写的,貌似WP的markdown插件有 ...

  10. ueditor+flash粘贴word

    实现方式: 1.前端引用代码 .粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持 目前项目是用了一种变通的方式: 先把word上传到后台 .poi ...