图片居中显示-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<style>
.box{ position: relative;overflow:hidden;width: 1000px; height:500px; margin:100px auto;}
.box img{
border:none;position:absolute;top:0;left:50%; top:50%;transform: perspective(1px) translate(-50%,-50%);width:100%;}
</style>

<div class="box">
<img src="2.jpg" />
</div>

</body>
</html>

时间: 2024-11-11 21:25:26

图片居中显示-1的相关文章

关于大图片居中显示~适应移动端

今天修改项目的时候碰到一个问题,移动端点击小图片后,打开一个大图片显示:由于这个大图片的比例是不确定的,所以如何显示就成了一个问题. 最初的这个功能是设置了一个css3的属性,然后在Android手机上出了问题, -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; 然后我查了一下这个属性: 因为版本的原因,一些Android机没法使用这个属性. 我找了找居中显示的资料,看了看百度图片的图片显示方

图片大小不改动,根据屏幕大小自动把图片居中显示

background属性 background-image: url('../img/1_1.jpg'); <!-- 背景图片路径 --> background-repeat: no-repeat; <!-- 背景图片是否重复显示 --> background-position: center; <!-- 若背景图片小于div,则居中显示 --> background-attachment: fixed; <!-- 背景图片固定,不随scroll拖动而变动 --&

html基础 img标记 设置图片的宽度和边框 利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

HTML中使图片居中显示

注:imageId为图片id<style type="text/css"> #imageId{ display:block; position:relative; margin:auto; } </style>

图片居中显示

h1 {   position: relative;   z-index: 2;   border: solid red 5px;   width: 540px;   height: 0;   margin: 110px auto 15px;   padding: 230px 0 0;   overflow: hidden;   xxxxborder: 1px solid;   background-image: url(/aone2/images/error/404_2.jpg?_av_=12

微信小程序,图片居中显示,适配不同机型

<view style='width:100%;height:100%;text-align:center;' class="picture-2"> <image style='width:94.5%;' class="infoImage" src="/pages/image/2.jpg" mode='widthFix'></image> <view> 原文地址:https://www.cnblog

Android开发教程--设置ImageView图片的显示比例

为适应不同屏幕的手机,ImageView图片的显示比例,可以使用android:scaleType属性来处理,处理方式的有以下几种: 1.在xml配置中使用:android:scaleType="centerCrop" 2.在代码中使用:   imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); ScaleType的值分别代表的意义:ImageView是Android中的基础图片显示控件,该控件有个重要的属性是ScaleTyp

Android:属性scaleType与图片的显示

ImageView是Android中的基础图片显示控件,该控件有个重要的属性是ScaleType,该属性用以表示显示图片的方式, 共有8种取值 matrix 用矩阵来绘制(从左上角起始的矩阵区域) fitXY 把图片不按比例扩大/缩小到View的大小显示(确保图片会完整显示,并充满View) fitStart 把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置(图片会完整显示) fitCenter 把图片按比例扩大/缩小到View的宽度,居中显示(图片会完整显示) fitEnd

关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示

我们都知道在ios中,每一个UIImageView都有他的frame大小,但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢?在默认情况,图片会被压缩或者拉伸以填满整个区域. 通过查看UIView的属性可以知道,view的contentMode属性可以用来控制图片的显示情况.下面的设置可以让图片进行居中显示. 1 imageView.contentMode =  UIViewContentModeCenter; 这个居中是包括了,横向和纵向都是居中.图片不会拉伸或者压缩,就是按照im