css样式 图片随页面拉伸或缩小居中布局

已于 2024-05-25 10:09:56 修改
阅读量180 收藏
点赞数 3
文章标签： css 前端 html
于 2024-05-23 11:57:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40230735/article/details/139143552
版权 
<div class="flex justify-center relative">
  <!--设置图片为背景图 banner -->
  <div class="w-[1920px] h-[400px] banner bg-cover bg-no-repeat bg-center mx-auto"></div>
  <div class=" w-[1200px] h-full absolute left-1/2 top-0 transform translate-x-[-50%]">
    <!--在图片上定位按钮也随页面移动 -->
    <div class="btn absolute bottom-[75px] left-[6.5%]"></consult-now-btn>
  </div>
</div>
Amodoro
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
让一个元素在网页上跟随网页窗口大小变化始终保持上下左右居中
编程路
04-17 340
【代码】让一个元素在网页上跟随网页窗口大小变化始终保持上下左右居中。
js+CSS 图片等比缩小并垂直居中实现代码.docx
01-19
js+CSS 图片等比缩小并垂直居中实现代码.docx
关于css样式让图片的某些区域拉伸，其他部分保持比例！原理讲解！
最新发布
weixin_68397463的博客
06-06 846
关于css样式让图片的某些区域拉伸，其他部分保持比例！原理讲解！
css——图片缩放，拉伸，变形的解决办法
杜永康的博客
03-09 8846
是一种 CSS 样式属性，用于设置对象（如图片或视频）在容器中的位置。通过设置属性，可以改变对象在容器中的位置，从而实现布局上的调整。该属性的值可以是一个具体的像素值，也可以是相对于容器的百分比值。例如：设置可以将对象在容器中居中显示。该属性通常与object-fit属性一起使用，用于控制对象在容器中的大小和位置。
CSS如何实现图片等比例缩放不变形
Ronaldouy的博客
10-08 1万+
CSS如何实现图片等比例缩放不变形
css 图片居中放大,不同比例图片居中缩放显示的三种方法
weixin_33855578的博客
08-03 4081
效果方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示，兼容性最好HTML代码 复制代码CSS代码.img-box{/*限定图片盒子宽高*/width:500px;height:500px;}img{width:auto;height:auto;max-width:100%;max-height:100%;/*不定宽高的图片居中显示*/position: rel...
CSS3样式表-定位之Flex布局.pptx
05-06
Flex布局，全称为Flexible Box布局，是CSS3中一种强大的页面布局工具，旨在提供更为灵活、响应式的网页设计。自2009年由W3C提出以来，它已获得了所有主流浏览器的广泛支持，成为现代网页开发的标准。通过Flex布局，...
CSS 水平居中并限定最大的宽度实现
11-19
在CSS布局设计中，水平居中和限制最大宽度是一个常见的需求，尤其在创建响应式网页时更为重要。本文将深入探讨如何在满足这两个条件的情况下，有效地实现内容的展示。 首先，要实现元素的水平居中，可以利用CSS的...
浅谈CSS3中display属性的Flex布局的方法
09-24
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信小程序的设计。`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、...
flex 各组件对应的css样式属性大全
10-24
综上所述，掌握Flex布局及其相关CSS样式属性，能极大地提升Web页面的响应式设计能力，使布局更加灵活，适应各种屏幕尺寸和设备类型。通过熟练运用这些属性，开发者可以创造出更为优雅、易维护的网页布局。
body背景图片拉伸另类实现
09-25
body背景图没有拉伸效果，所以只能使用其他方法了，IE中测试可行的，具体实现如下，感兴趣的朋友可以了解下哦
CSS-flex-style:CSS中不同样式的Flex样式
03-15
总结，CSS Flex样式极大地简化了网页布局的复杂性，提供了极大的灵活性。通过熟练掌握和应用这些样式，你可以创建出更加灵活、响应式的网页设计。无论是在响应式布局、导航菜单、卡片布局还是复杂组件设计中，Flex...
css背景图片拉伸
sdmms12的博客
08-29 466
top: 0;left: 0;width:100%;zoom: 1;
CSS实现图片居中且缩放不影响图片纵横比
Einstellung的博客
03-09 4391
实现代码 我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。 对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。 建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中 下面是代码： <!DOCTYPE html> <html> <head> &lt
css实现背景图拉伸(css背景拉伸，有图例)
你有什么可以拽？
09-18 5402
制作页面要在表格内插入背景图时，我们可以使用CSS进行控制，代码如下： style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position:
css设置背景图拉伸铺满！
热门推荐
LiFangHui_的博客
06-24 4万+
在css样式里设置背景图片拉伸充满有几种方法：1、用body里设置（但是这样的缺点是只能横向充满，高度是按比例拉伸的）:background-size:100%;或者：background-size:cover;示例代码：body{ background-image:url(test.jpg); background-repeat:no-repeat; background-si...
自动计算图片的宽度和高度拉伸至全屏附CSS及VUE简单实现
♀我爱摇滚，更爱金属乐♀
06-05 794
场景：比如说APP封面等特点：能够自动适应设备的宽高，保证图片100%显示，不会缺失或者留边，但有可能会变形。
解决css中div随窗口大小变化而变化
烟溪彭于晏的博客
07-12 9715
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Amodoro

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值