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. C++——inline function

    前言 当代码写复杂后,一定会封装出大量的函数,这会导致两个问题: ①函数越多,栈的消耗也越厉害 疑问:为什么代码复杂了.函数变多了,栈消耗的就很厉害? 答:因为这会导致函数的调用深度可能会很深,比如: ...

  2. 并发编程.md

    操作系统基础 人机矛盾: CPU利用率低 磁带存储+批处理:降低数据的读取时间,提高CPU的利用率 多道操作系统------在一个任务遇到IO的时候主动让出CPU,给其他任务使用 由操作系统完成 切换 ...

  3. Windows 10安装

    使用U盘安装操作系统教程 本教程介绍如何使用U盘安装操作系统,以安装Windows 10过程作为举例. 1 获取操作系统iso镜像文件 获取操作系统ISO镜像文件有很多途径,此处介绍从微软官网下载wi ...

  4. OAuth2在微服务架构中的应用

    首先是为什么要在微服务场景使用OAuth2,这是因为使用了OAuth2后,就能向第三方系统提供授权. 其次是如何使用,见下图: 在微服务架构中使用OAuth2,有几个问题需要我们思考: 1. toke ...

  5. 剑指Offer(二十九):最小的K个数

    剑指Offer(二十九):最小的K个数 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/baid ...

  6. JVM堆空间用途分析与划分依据

    在上一次[https://www.cnblogs.com/webor2006/p/9876493.html]已经对JVM的内存空间的划分进行了理论化的学习,这次还是对上一次提到的理论进行进一步的补充, ...

  7. linux网络编程之socket编程(十五)

    今天继续学习socket编程,这次主要是学习UNIX域协议相关的知识,下面开始: [有个大概的认识,它是来干嘛的] ①.UNIX域套接字与TCP套接字相比较,在同一台主机的传输速度前者是后者的两倍. ...

  8. css完结篇

    1.如何让一个绝对定位的盒子居中 left:50%; margin-left:-宽度的一半; 2.固定定位 position:fixed; 1.脱标 参考点:浏览器左上角 作用:固定导航栏,返回顶部, ...

  9. MaxPlus WStr Python 中的字符串传递给 MaxPlus

    MaxPlus WStr Python 中的字符串传递给 MaxPlus 在 MaxPlus 中,很多方法的参数使用的字符串的类是 WStr,所以在 Python 中,我们传递字符串的时候,就要把 P ...

  10. unittest(一)IDE导出的代码分析

    在 Python 语言下有诸多单元测试框架,如 unittest.Pytest.nose 等,其中 unittest 框架(原名 PyUnit 框架)为 Python 语言自带的单元测试框架,从 Py ...