css图片固定宽高不变形,自动显示中间部分

最新推荐文章于 2023-09-27 18:36:53 发布

童无心

最新推荐文章于 2023-09-27 18:36:53 发布

阅读量1.3k

点赞数 1

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/hyz792901324/article/details/106825077

版权

html 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

css 图片固定宽高不变形,自动显示中间部分

<html>
	<style>
		div {
			background-image: url('1.jpg'); 
			
			background-position: center; 
			background-repeat: no-repeat; 
			background-size: cover;
			
			width:500px;
			height:500px;
			
		}
	</style>
	<div></div>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

童无心

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS实现图片居中且缩放不影响图片纵横比

Einstellung的博客

03-09

4465

实现代码我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中下面是代码： <!DOCTYPE html> <html> <head> &lt

html中img图片截取显示中间部分

棉花没有糖的博客

04-24

9436

由于需求要求图片居中显示，同时要有图片加载错误的处理，所以排除了css的background-position方法 html代码： <img src="' + cover + '" onerror="this.src=assets/pro-ping.png;" onload=imgOnload(this) /> js代码： function imgOnload(e) { conso...

参与评论您还未登录，请先登录后发表或查看评论

DIV+CSS实现两边固定宽度,中间自适应宽度

perny的专栏

09-21

4611

DIV+CSS实现两边固定宽度,中间自适应宽度-天魅设计博客 body{ margin:0; padding:10px;} #head{ margin-bottom:10px; height:50px; background-color:#999999} #main{} #left{ width:200px; float:left;margin-right:-200px; background-

css解决图片宽高比不固定时，图片居中的问题

cs840610862的博客

02-02

947

web开发中，经常会遇到图片居中显示的问题，如果图片的尺寸固定还好说，如果不固定，有的图片是宽度比较大，有的图片是高度比较大，碰到这种情况，UI就会和你说：“这个不行，我要居中的！” 抱着万马奔腾的心情，千幸万苦之后，找到了下面这种解决方案，只需要写点CSS <span className="span"> <img src="" className="img" alt="" /> </span> .span { display: .

CSS图片居中显示不变形，只显示中间部分

CaseyWei

12-13

2084

平时图片直接上下左右平铺了，今天产品和UI要求图片不能变形，居中显示，记录一下。

CSS 图片居中显示不变形，显示图片中间部分

云上人间钦自赏

01-16

1万+

<div style="background-image:url(这里填写图片的路径}); background-repeat: no-repeat; background-position:center center; background-size: cover; width:165px;height:105px;"> </div> 其他属性没什么可说的，...

img或background-image实现图片高度根据宽度改变而改变

qq_43651168的博客

06-20

3811

img或background-image实现图片高度根据宽度改变而改变。图片的高度根据宽度进行自适应。

html5设置图片居中自适应,HTML5 图片宽高自适应，居中裁剪不失真

weixin_39663970的博客

06-04

2287

一，使用 JS，先上效果图，右图为定死宽高的效果，左图为处理之后的1，主要思路是，在图片 onload 后，将图片的宽高比和 div 容器的宽高比进行比较，2，从而确定拉伸或者压缩之后是宽还是高不足以填充容器3，将不足以填充容器的方向设置为和容器一致4，此时，图片的另一个方向可能超出容器，此时只要将图片做反方向的偏移，使其居中5，容器定义超出部分不显示，以下是结合 Vue 的一个例子图片居中#...

CSS实现自适应下保持宽高比

诗渊的博客

09-25

1万+

本文介绍了如何实现保持宽高比不变，分别给出了CSS实现方法以及jquery的实现方法。

CSS样式

Lzy512697497的博客

12-28

483

CSS 三大特性申明冲突:多个选择器，选中同一个元素，相同属性名不同属性值。浏览器自动触发重叠机制。 1.层叠性就近原则 2.继承性 text-，font-，line-，color 可以继承强制继承 1.继承不能继承的属性 2.继承已经声明过的属性子元素 {属性:inherit} 3.优先级权重相同，层叠性。不同，采取优先级。权重越大，级别越高。继承或* 权重0000 标签选择器权重0001 类选择器权重 0010 id选择器权重0100 style 权重1000 !import

css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中

xingjianxinn的专栏

03-17

3722

2011.02.22 于新城科技园。实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。随着css3的普及，现在介绍一种单纯通过css来进行控制。具体代码如下： [html] view plaincopy > head> meta charset

css实现在一定的区域内最大程度的完整展示图片