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=" ...
随机推荐
- Windows Server 2008 用户管理
默认用户和组 默认用户 默认只有来宾用户(Guest)和管理员(Administrator) 默认组 创建账户 图形界面创建用户 创建用户选项解析 对于公司新员工,分配给他的电脑,应该让其有一定的自主 ...
- Caused by: java.lang.ClassNotFoundException: org.fusesource.jansi.WindowsAnsiOutputStream
08:23:18,995 |-INFO in ch.qos.logback.core.joran.action.AppenderAction - About to instantiate append ...
- php多版本配置
需求分析: 需要在一台装有php5.4的测试服务器跑的上php7.2.x的项目 安装phpenv(php版本控制) $ sudo yum install git $ mkdir -p repos/gi ...
- cookie和session基础知识学习
一.session的简单使用 session是服务器端技术,服务器在运行时可以为每一个用户的浏览器创建一个独享的session对象.session的使用步骤: 获取session对象使用session ...
- PHP搭建大文件切割分块上传功能示例
转载:https://www.jb51.net/article/101931.htm 背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示“该文件 ...
- STM32F10XX学习笔记的石墨连接
https://shimo.im/docs/QHGRrWxbeb0NiBm9/ <STM32F10X系列笔记>,可复制链接后用石墨文档 App 打开
- Jmeter之JDBC类型组件
一.背景 在测试过程中,避免不了与数据库打交道,比如数据的校验.数据的准备或者重置操作,又或者对数据库进行增删改查,基于以上诉求,在Jmeter中是如何实现的呢.可使用JDBC类型组件来实现以上功能操 ...
- 064_将 Linux 系统中 UID 大于等于 1000 的普通用户都删除
#!/bin/bash#先用 awk 提取所有 uid 大于等于 1000 的普通用户名称#再使用 for 循环逐个将每个用户删除即可 user=$(awk -F: '$3>=1000{prin ...
- leetcode解题报告(20):Rotate Array
描述 Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the arr ...
- 爬虫(二):Urllib库详解
什么是Urllib: python内置的HTTP请求库 urllib.request : 请求模块 urllib.error : 异常处理模块 urllib.parse: url解析模块 urllib ...