HTML中图片居中显示，不变形的两种方法

最新推荐文章于 2023-09-26 19:04:47 发布
最新推荐文章于 2023-09-26 19:04:47 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： Html 文章标签： html-img
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26786441/article/details/103053868
版权

1 background

按照最短边最大显示原则，最长的边超出部分隐藏，图片整体水平垂直居中，图片不拉伸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#imgbox {
				margin: calc(50vh - 250px) auto;
				width: 500px;
				height: 500px;
				background-image: url(https://img-blog.csdnimg.cn/20191113174018452.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
			}
		</style>
	</head>
	<body>
		<div id="imgbox">

		</div>
	</body>
</html>

效果 原图

2 img居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 50%;
				margin: 50px auto;
			}

			.img-box {
				width: 300px;
				height: 200px;
				overflow: hidden;
				position: relative;
				z-index: 1;
				border: 1px solid red;
			}

			.img-box img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				margin: auto;
				z-index: -1;
				*zoom: 1;
			}

			.img-box:before {
				content: "";
				display: inline-block;
				padding-bottom: 100%;
				width: 0.1px;
				/*必须要有数值，否则无法把高度撑起来*/
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span>行内元素垂直居中</span>
			<div class="img-box">
				<img src="../images/1555658617201.png" />
			</div>
		</div>
	</body>
</html>
汤同学丶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML CSS 解决网页图片变形的方法
m0_47665999的博客
05-09 3192
1.背景图片方式 这种方法是利用css背景图方式，让图片垂直水平居中显示，不会拉伸变形 .box { width: 400px; height: 400px; background: url("img") no-repeat center center; background-size: cover; } 2.CSS3的object-fit属性 object-fit有五个值 fill ---默认，不保证保持原...
保持宽度不变裁剪图片 html,固定长宽的img标签如何保持里面的图片不缩放
weixin_36260304的博客
06-05 1162
一、将图片作为dom元素方案1：给图片周围留白像这样，1：1的图片撑满图片区域，其他比例图片周围留白(粉~)：如果图片高度大于宽度，则左右留白，高度小于宽度，上下留白实现代码：1body{margin: 0;background-color: #555;}#box {display: flex;justify-content: start;width: 500px;flex-wrap: wrap;...
Android TextView显示HTML 图片居中且不缩放
12-26
Android TextView可以支持简单的Html标签，但大部分Html标签是不支持的或者处理得不太好的，其中Img标签就是如此。如果在html中使用img标签的话就会遇到以下问题： 1、图片不能居中显示 2、图片的大小被缩小 3、图片是在ImageGetter中获取，ImageGetter不能和ImageSpan同时使用； 笔者通过参考大量资料和源码，解决了上述3个问题。
Jsp中如何让图片在div中居中
01-08
jsp中让图片在div中居中显示，如上图 例子： 代码如下: //CSS文件 <style type=”text/css”> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:table-cell; //将对象作为表格单元格显示 background:pink; } img{ width:150px; height:150px; margin:0 auto; vertical-align:middle; border:2px solid
html图片只固定高度,CSS让高度不确定图片垂直居中的几种技巧
weixin_42517623的博客
06-04 505
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。方法一将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为dis...
Html把图片居中显示（附怎么更改图片显示）
最新发布
qq_64867440的博客
09-26 1万+
我的图像如下：我运行出来的图片如下图：html中输入： 我的代码如下： 方法2：使用margin属性 html 我的代码
HTML CSS怎么解决网页图片变形的办法
ldkjsdty的博客
05-20 2761
1.背景图片方式 这种方法是利用css背景图方式，让图片垂直水平居中显示，不会拉伸变形。 .box { width: 400px; height: 400px; background: url("img") no-repeat center center; background-size: cover; } 2.CSS3的object-fit属性 object-fit有五个值 fill --- 默认，不保证保持原有的比例，根据宽高拉伸或者压缩填满
img 显示固定部分，超过部分隐藏，不压缩，不变形
weixin_42861240的博客
03-19 2万+
不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图：只显示图片中间部分（红框部分） 下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另...
html 如何完美的显示图片，不拉伸图片，完整显示等等。
PrimaryColor
11-22 1万+
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> i.
html图片显示变形,CSS完美解决前端图片变形问题的方法
TwoBE9876的博客
03-10 2102
最后一种cover效果是最理想的，即居中显示，占满整个容器并且不变形。但是，如果您是资讯站、图片展等等，千万不要用这种方法，否则你的图片将很难被搜索引擎收录。如果图片的宽度限制了，高度大于等于容器的高度，就会填满整个容器，但是如果图片高度小于容器高度，就会出现空白，固定高度同理。此方法是最简单也最实用，配合后台裁切，更加完美。可以看到，无论是宽度超过容器，还是高度超过容器，还是宽高都不超过容器，都能全部居中显示在容器内，不会裁切。二、让图片始终显示在容器内，并且居中显示。
HTML如何让IMG自动适应DIV容器大小的实现方法
11-21
为了让IMG自适应大小，如下我做了一个横向自适应的示例： IMG样式（横向拉伸，纵向自动匹配大小）   DIV样式（元素居中显示） IMG样式 （横向拉伸，纵向自动匹配大小） width:100%; height:auto; （纵向拉伸，横向自动匹配大小） width:auto; height:100%; DIV样式（元素居中显示） display:flex; align-items:center; justify-content:center; 做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子： img{
Android自定义TextView实现文字图片居中显示的方法
08-28
下面小编就为大家分享一篇Android自定义TextView实现文字图片居中显示的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
让DIV水平垂直居中的两种完美方法推荐
01-19
今天写的了百度前端学院春季班的任务：定位和居中问题 由于距离上次学习CSS有点久远了，加上以前木有记笔记的习惯，方法忘得只剩下一种，今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中。...
移动Web中图片自适应的两种JavaScript解决方法
12-10
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。开始吧 在做配合手机客户端的Web wap页面时，发现文章对图片显示的需求有两种特别重要的情况，一是对于图集，这种文章只...
php图片居中显示图片,CSS实现图片居中的三种方式
weixin_39631667的博客
03-10 826
在我们的WEB前端css开发过程中，我们避免会遇到让图片居中的情况，为了网页美观以及用户的体验，我们有时候就要让图片居中，那么我们也都知道图片居中的方法有很多，今天我们就给大家详细介绍下CSS实现图片居中的三种方式！1.利用display:table-cell，具体代码如下：html代码如下：1 2 3 css代码如下：1 .img_wrap{2 width: 400px;3 h...
让html img图片垂直居中的三种方法
firstcode666的博客
03-03 2万+
三种让img元素图片在盒子内垂直居中的方式教程，依据代码与文章教程熟习掌握并加以应用。 一、使用flex完成垂直居中 操纵cssflex实现垂直居中。flex或许不是完成垂直居中最好的选择，由于IE8,9其实不赞成它。 那时，为了用flex实现垂直居中，我们起首要竖立一个包裹着图片的div元素，日后给它定义一些根基属性。 如下图片img宽度为（设置为）100px，高度为100px。 HTML代码部份： <div class="flexbox"> <img src="...
三行代码实现在网页中添加背景且居中填充不拉伸
sayhitoloverOvO的博客
09-03 841
代码位置 添加背景需要写在专门的css文件中或者在网页文件的html标签中新建style标签里： <html><style>配置语句</style></html> 了解background属性： background属性是一个简写属性，专门设置背景的属性，可以设置背景色，也可以设置背景图片。 下面看看background可以设置的属性： background-color： 规定要使用的背景颜色。 background-position： 规定背景
html 图片居中方式
热门推荐
Locker的博客
04-11 7万+
图片的居中方式有很多种吧，算是html基础，但是某一次我就给忘记怎么设置图片居中了。先写几个，后续再来补充其他方法 div{ width: 200px; height: 200px; border: 3px solid skyblue; } 以上代码的效果图 解决方法一： img{ position: relative; left: 50%; ...
php 自动拉伸图片,实例详解Javascript防止图片拉伸的自适应处理
weixin_42514640的博客
03-21 300
相信大家在日常的web开发中，作为前端经常会遇到处理图片拉伸问题的情况。本文主要给大家介绍了关于利用Javascript防止图片拉伸的自适应处理方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方，而一旦牵扯图片，就会涉及到图片拉伸的问题，当然，在图片上传...
html图片居中
05-29
要让图片居中，可以使用以下两种方法： 1. 使用CSS样式设置图片居中 ```html <style> .img-container { display: flex; justify-content: center; align-items: center; } </style> <div class="img-container"> <img src="your-image-url" alt="your-image"> </div> ``` 2. 使用HTML标签设置图片居中 ```html <div style="text-align:center;"> <img src="your-image-url" alt="your-image"> </div> ``` 以上两种方法都可以实现图片居中，具体使用哪种方法可以根据实际情况选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值