css 显示图片中间部分 图片短边显示出来

于 2022-10-23 23:48:43 发布
阅读量557 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ2856639881/article/details/127483538
版权

css html 前端 
<div v-if="user.image"
                :style="{width:'130px',height:'130px','background-size':'130px 130px',background:'url('+user.image+') no-repeat center center'}">
            </div>
            <div v-else
                :style="{width:'130px',height:'130px','background-size':'130px 130px',background:'url(https://tc.cunall.com:9000/test_img/user.png) no-repeat center center'}">
            </div>

QQ2856639881
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 3.0中裁剪图像的特效
越陌度阡
06-10 502
在有CSS 3.0之前裁剪图片实现也是颇有难度的，现在我们有了两个非常方便简单的属性可以实现裁剪，那就是object-fit和object-position，这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比，利用它我们可以实现一个如下的特效。 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
css长图如何展示局部,css可以设置图片以最短边为依据展示在父级中吗？
weixin_30253289的博客
08-04 1174
有这么个需求：div里有个img标签，图片是从后台传过来的，宽高不定，长度不定，而div是个写死了宽高的一个正方形，需求是，不论图片宽高多少，比例是什么样子，让图片充满DIV，且图片不能走形。因为div宽高是定死的正方形，为了保证不走形，有一种相对妥协的实现方案是让图片的中心部位显示在div中来展示。那么问题来了我让IMG宽度100%，如果图片实际的高>宽，图片可以充满div并且中心部分展示...
css ：解决图片实际宽高不满足容器宽高，造成短边露出背景色
weixin_39137100的博客
03-16 966
高度固定的情况下，如果直接设置height:100%,那么图片会变形，显然不是我们想要的。 解决办法：将图片改成背景图，并且设置background-size:cover background-size:cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中 <div class="face-head-img" :style="{ backgroundImage: 'url(' + cardHeadPicUrl + ')' }"&gt.
html5中img父子级样式,css,css3_css可以设置图片以最短边为依据展示在父级中吗？，css,css3,html5,前端 - phpStudy...
weixin_39534002的博客
06-20 382
css可以设置图片以最短边为依据展示在父级中吗？有这么个需求：div里有个img标签，图片是从后台传过来的，宽高不定，长度不定，而div是个写死了宽高的一个正方形，需求是，不论图片宽高多少，比例是什么样子，让图片充满DIV，且图片不能走形。因为div宽高是定死的正方形，为了保证不走形，有一种相对妥协的实现方案是让图片的中心部位显示在div中来展示。那么问题来了我让IMG宽度100%，如果图片实际的...
css 图片只显示中间部分 居中显示
sika-master的博客
03-03 5026
在项目中要做移动和pc端的适配，所以图片需要居中显示，不论窗口如何变化，始终显示中间部分的图片。 这个是图片在pc端，宽度为100%时显示的 如果图片宽度100%，放在移动端看，就会很小，显示的是一整张图片，不符合需求。经过css的设置，使得图片可以显示中间部分。 这个是图片在移动端显示。。能使图片在移动端显示图片的中间部分 思想： 第一种：采用图片在div盒子中，盒子宽度100%,给一个高度，让图片使用 相对定位+transform 移动。 第二种：使用图片做背景图片，使用背景图片的backgrou
CSS两张图片叠加透明显示特效
07-14
在"CSS两张图片叠加透明显示特效"的例子中，我们通常会有两层图像：一层是背景图片，另一层是人物图片。为了实现这种效果，我们需要为这两张图片设置不同的CSS层叠顺序和混合模式。以下是一个基本的HTML结构示例： ...
CSS background 控制显示图片的一部分
12-13
现在分别要显示A、B、C 等字母，我们的CSS可以这么写： 这里图片一个字母所占的width=20px,height=20px; 复制代码代码如下:.mar_wordA { background: url(“../images/ranking.gif”) no-repeat scroll 0 0px ...
jQuery+CSS实现图片感应鼠标高亮显示当前图片
06-10
在网页设计中，提升用户体验是至关重要的，而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片，增强视觉效果，同时提供更直观的操作...
纯CSS实现鼠标悬停显示图片效果的实例分享
09-24
总的来说，纯CSS实现的鼠标悬停显示图片效果是一种实用且高效的方法，它可以提升用户体验，无需额外的JavaScript代码。只需正确选择和应用CSS选择器，结合伪类和过渡效果，就能轻松实现这种交互效果。在设计网页时，...
img图片只显示一部分
魔术猿-Vezn
05-17 1万+
剪裁图像： img { position:absolute; clip:rect(0px,60px,200px,0px); } 浏览器支持所有主流浏览器都支持 clip 属性。 参考代码                            定义和用法clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性
如何用css3响应式的裁剪缩放图片
sdfsfsdscd的博客
06-10 1446
其实这篇文章的标题也可以叫做《如何用css3实现微信小程序image的mode属性》，因为我们今天讨论的响应式裁剪缩放图片，主要是实现了微信小程序image标签的mode属性。 微信小程序image组件的mode属性 开发过微信小程序的同学都知道，当后台返回来的图片大小不一样，或者用户上传的图片大小不一样，而我们需要统一进行展示的时候，可以利用image标签的mode属性对图片进行缩放裁剪。mod...
html中img图片截取显示中间部分
棉花没有糖的博客
04-24 9190
由于需求要求图片居中显示，同时要有图片加载错误的处理，所以排除了css的background-position方法 html代码： <img src="' + cover + '" onerror="this.src=assets/pro-ping.png;" onload=imgOnload(this) /> js代码： function imgOnload(e) { conso...
CSS_图片自适应
小歪博客
07-08 571
object-fit 值 描述 尝试一下 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原有尺寸比例。但部分内容可能被剪切。 none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小 initial 设置为默认值 inherit 从该元素的
两种方法实现用CSS切割图片只取图片中一部分
热门推荐
zunguitiancheng的专栏
07-14 3万+
http://www.jb51.net/css/150036.html 切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已，主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。下面有个不错的示例，大家可以参考下 切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式，
CSS之固定大小的div中自动显示图片的中间部分
netuser1937的博客
02-09 8947
CSS之固定大小的div中自动显示图片的中间部分
css设置图片适配：显示中间部分(居中显示)
张媛的博客
04-13 942
给对应的图片设置样式 { width: 100%; height: 100%; object-fit: cover; object-position: center; }
css图片只显示居中部分
hy3528的博客
03-27 720
<div style="width:300px; height:300px;"> <img src="dog.jpg" alt=""/> </div> div{ position: relative; left:100px; top:100px; ...
css 图片只显示一部分
最新发布
08-09
通过适当调整`background-position`的数值，我们可以控制图片显示的位置。例如，如果希望显示图片的右下角的1/4部分，可以这样设置： ```css .my-image { background-image: url("image.jpg"); // 替换为你的图片...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值