css设置图片适配：显示中间部分(居中显示)

最新推荐文章于 2022-12-13 14:33:47 发布
最新推荐文章于 2022-12-13 14:33:47 发布
阅读量985 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42132841/article/details/124153599
版权

给对应的图片设置样式

{

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

}

张媛的博客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
根据图片大小自适应的CSS
08-28
根据图片大小自适应的CSS，根据图片大小自适应的CSS
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
最新发布
weixin_48596030的博客
07-05 623
CSS实现图片裁剪居中（只截取剪裁图片中间部分，图片不变形）
css 图片只显示中间部分 居中显示
sika-master的博客
03-03 5119
在项目中要做移动和pc端的适配，所以图片需要居中显示，不论窗口如何变化，始终显示中间部分的图片。 这个是图片在pc端，宽度为100%时显示的 如果图片宽度100%，放在移动端看，就会很小，显示的是一整张图片，不符合需求。经过css的设置，使得图片可以显示中间部分。 这个是图片在移动端显示。。能使图片在移动端显示图片的中间部分 思想： 第一种：采用图片在div盒子中，盒子宽度100%,给一个高度，让图片使用 相对定位+transform 移动。 第二种：使用图片做背景图片，使用背景图片的backgrou
css笔记：CSS显示图片中间区域
Miss_Audrey的博客
12-09 7242
css在不改变图片尺寸情况下在固定容器内显示图片的中间区域 下面三种方法： ①<div style="width:100px;height:100px;> <img src="1.jpg" width="500" height="300" alt="" style="margin-top:-150px;margin-left:-250px;" /> </div>②作为容器的背景图片<di
css 图片自适应
weixin_43422861的博客
09-07 6309
当图片比例不固定，需要自适应显示图片时，可以使用css属性：object-fit object-fit有如下属性值： object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。
CSS图片居中显示不变形，只显示中间部分
CaseyWei
12-13 2064
平时图片直接上下左右平铺了，今天产品和UI要求图片不能变形，居中显示，记录一下。
css图片只显示居中部分
hy3528的博客
03-27 729
<div style="width:300px; height:300px;"> <img src="dog.jpg" alt=""/> </div> div{ position: relative; left:100px; top:100px; ...
CSS图片自动适应大小
courseware的专栏
12-02 3337
图片自动适应大小的问题在平时制作的时候是比较常见的问题，下面提供一个比较简单的解决方法：div img { max-width:600px; //IE7、FF等其他非IE浏览器下最大宽度为600px; width:600px; //所有浏览器中图片的大小为600px; width:expression(document.body.clientWidth>600?"600px":"auto"
CSS设置未知大小图片在已知大小容器水平垂直居中
09-25
总结来说，这个解决方案通过CSS实现了未知大小的图片在已知大小容器内的水平垂直居中，同时通过JavaScript进行图片尺寸的适配，确保图片不会溢出容器。这种方法兼容了不同浏览器，提供了良好的用户体验。
js实现固定显示区域内自动缩放图片的方法
10-23
为了达到这一目的，我们创建了一个ID为`img`的`<div>`作为图片的容器，设置了其宽度、高度和相对定位，并设置了`overflow:hidden`以隐藏超出容器边界的图片部分。 接下来，我们需要处理图片加载完成后的事情。通过...
CSS控制显示图片的一部分
04-09
NULL 博文链接：https://boonya.iteye.com/blog/1635844
CSS background 控制显示图片的一部分
12-13
使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 假设我有纸张竖直方向的一张图片，竖直y轴方向分别是字母：A,B,C…. 现在分别要显示A、B、C 等字母，我们的CSS可以这么写： 这里图片一个字母所占的width=20px,height=20px; 复制代码代码如下:.mar_wordA { background: url(“../images/ranking.gif”) no-repeat scroll 0 0px transparent; } .mar_wordB { background: url(“../images/ranking.gif”) no-rep
改变浏览器大小,图片（img）内容居中显示
05-12
总之，要使图片在浏览器大小改变时居中显示，开发者需要掌握CSS布局技术，如Flexbox、Grid或绝对定位，并利用这些工具来调整元素的位置。同时，为了确保良好的响应式设计，还需要考虑不同设备和屏幕尺寸的适配。通过...
CSS如何让一个按钮居中应该怎么做
09-25
要实现按钮在网页布局中的水平居中，最常用的方法是将按钮的父容器设置为内联块（inline-block）或者块级（block）元素，并对其应用自动外边距（margin-auto）。此外，按钮本身的文本对齐方式（text-align）也需要...
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
12-13
在本文中，我们将深入探讨`object-fit`的工作原理以及如何利用它来优化图片适配。 首先，`object-fit`有以下几个可选值： 1. `fill`：这是默认值，媒体元素将填充其容器的整个空间，可能会导致图像失真，因为原始...
css自适应图片样式,css怎么让图片自适应？css图片自适应大小的方法介绍
weixin_42398629的博客
08-04 2973
对于一个网页来说，有一张好看又清晰的背景图片是非常吸引人的，但是并不是每张图片都是有相同的大小，所以就需要晒西安图片的自适应，那么，css怎么让图片自适应呢？本篇文章将来介绍关于css图片自适应大小的方法。我们下面就来直接看一个例子：position:fixed;top: 0;left: 0;width:100%;height:100%;min-width: 1000px;z-index:-10;...
css 显示图片名,css 如何显示部分图片
weixin_32191249的博客
08-03 1260
css显示部分图片的实现方法：首先在html里创建一个div，用来放背景图片的；然后为div添加css样式，并添加背景图片url；最后添加一个“background-position”的样式，并为样式添加适当的负数值即可。本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。推荐：《css视频教程》css如何只显示部分图片？先在html里创建一个div，用来放背景图片的。为d...
css实现图片自适应容器的几种方式
u010227042的博客
11-10 966
css实现图片自适应容器 经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。 <div class='div1'> <img src="./peiqi.png" alt=""> </div> .div1 { width:500px; height:400px; border:1px solid black; } .div
Css 针对一个官网显示的页面，给出pc端iPad 手机端适配
05-25
针对一个官网显示的页面，给出 PC端、iPad和手机端的适配方案，可以采用响应式设计的方式进行实现。具体实现步骤如下： 1. 设置viewport 在head标签中设置viewport元标记，使得页面能够根据设备尺寸进行缩放，例如： ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 使用CSS媒体查询 使用CSS媒体查询来根据设备屏幕尺寸应用不同的CSS样式。例如： ``` @media (max-width: 768px) { /* 这里是针对小于等于768px宽度的设备的CSS样式 */ } @media (min-width: 769px) and (max-width: 1024px) { /* 这里是针对iPad等于769~1024px宽度的设备的CSS样式 */ } @media (min-width: 1025px) { /* 这里是针对大于等于1025px宽度的设备的CSS样式 */ } ``` 3. 采用流式布局 使用流式布局，使得页面元素能够根据设备屏幕尺寸进行自适应。例如： ``` .container { width: 100%; max-width: 1200px; /* 设置最大宽度 */ margin: 0 auto; /* 居中对齐 */ } img { max-width: 100%; /* 图片宽度最大为容器宽度 */ height: auto; /* 高度自适应 */ } ``` 4. 考虑设备像素比 针对高清屏幕的设备像素比，可以使用CSS媒体查询或者JavaScript脚本来进行适配。例如： ``` @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* 针对Retina屏幕的CSS样式 */ } ``` 以上是一个简单的适配方案，具体的实现方式还需要根据具体的页面结构和设计需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张媛的博客

打赏不能超过你的早餐钱。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值