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. IP地址简介及Linux网络管理工具

    IP地址简介 IP地址又叫网络地址也称逻辑地址,由32位2进制数组成,分4段每段8位,由10进制数表示,范围0~,段与段之间用点隔开采用点分十进制的表示法,在一个网络中ip地址是唯一的,IP地址最主要 ...

  2. c语言int类型的变量输入一个字符出错

    今天遇到一个C语言的小问题,就是写一个简单的计算器,定义一个%f%c%f的三个变量,作2+3,2-3这种可以不断输入并输入“OFF”跳出循环的计算器功能,便会出现错误: 错误的示例代码如下: #inc ...

  3. Socket的一些疑惑整理

    关于listen的问题请看steven<tcp/ip详解1>18章18.11.4 呼入连接请求队列一节,说的很清楚

  4. de4dot FAQ

    How to deobfuscate but make sure metadata tokens stay the same? --preserve-tokens will preserve all ...

  5. Multiple inheritance in Go

    原文:http://golangtutorials.blogspot.com/2011/06/multiple-inheritance-in-go.html --------------------- ...

  6. java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)解决方案

    java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES) at com.mysql. ...

  7. Hibernate初探之单表映射——创建Hibernate的配置文件

    编写第一个Hibernate例子 第一步:创建Hibernate的配置文件 使用安装的Hibernate tools插件帮我们自动生成 如果在编辑的时候eclipse没有出现代码自动提示功能的话,我们 ...

  8. 利用Python读取和修改Excel文件(包括xls文件和xlsx文件)——基于xlrd、xlwt和openpyxl模块

    https://blog.csdn.net/sinat_28576553/article/details/81275650#4.4%C2%A0%E4%BF%9D%E5%AD%98%E5%B7%A5%E ...

  9. [TypeScript] vs code TSLint常见错误解决方案

    TSLint是一个Typescrip{过滤}t验证工具,用于检测代码. TSLint: comment must start with a space (comment-format) 注释必须从一个 ...

  10. TCP单线程实现并发

    服务端 from gevent import monkey;monkey.patch_all() import socket from gevent import spawn server = soc ...