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

已于 2024-05-25 10:09:56 修改
阅读量160 收藏
点赞数 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
    评论
css3 让背景图片拉伸填充
qq_15704535的专栏
11-13 5606
css3 让背景图片拉伸填充 background-size:200px 200px; background-size:100% 50%; background-size:cover; background-size:contain; background-size:auto;
CSS实现图片居中且缩放不影响图片纵横比
Einstellung的博客
03-09 4375
实现代码 我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。 对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。 建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中 下面是代码： <!DOCTYPE html> <html> <head> &lt
css——图片缩放，拉伸，变形的解决办法
杜永康的博客
03-09 8430
是一种 CSS 样式属性，用于设置对象（如图片或视频）在容器中的位置。通过设置属性，可以改变对象在容器中的位置，从而实现布局上的调整。该属性的值可以是一个具体的像素值，也可以是相对于容器的百分比值。例如：设置可以将对象在容器中居中显示。该属性通常与object-fit属性一起使用，用于控制对象在容器中的大小和位置。
css实现背景图拉伸(css背景拉伸，有图例)
你有什么可以拽？
09-18 5396
制作页面要在表格内插入背景图时，我们可以使用CSS进行控制，代码如下： style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position:
关于css样式让图片的某些区域拉伸，其他部分保持比例！原理讲解！
最新发布
weixin_68397463的博客
06-06 569
关于css样式让图片的某些区域拉伸，其他部分保持比例！原理讲解！
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+html实现div盒子跟随页面缩放
smile2bug的博客
01-04 7095
233欢迎使用Markdown编辑器新的改变1功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编
浅谈CSS3中display属性的Flex布局的方法
09-24
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信小程序的设计。`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、...
flex 各组件对应的css样式属性大全
10-24
综上所述，掌握Flex布局及其相关CSS样式属性，能极大地提升Web页面的响应式设计能力，使布局更加灵活，适应各种屏幕尺寸和设备类型。通过熟练运用这些属性，开发者可以创造出更为优雅、易维护的网页布局。
CSS-flex-style:CSS中不同样式的Flex样式
03-15
总结，CSS Flex样式极大地简化了网页布局的复杂性，提供了极大的灵活性。通过熟练掌握和应用这些样式，你可以创建出更加灵活、响应式的网页设计。无论是在响应式布局、导航菜单、卡片布局还是复杂组件设计中，Flex...
移动web开发实例flex布局案例源码
02-16
每个案例都会包含HTML结构和对应的CSS样式，通过调试和修改这些样式，你可以更直观地感受Flex布局的灵活性和实用性。 6. 移动优先策略： 在移动Web开发中，通常采用移动优先（mobile-first）的方法，即首先为小...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
css 全屏等比缩放 使用transform
qq_38935512的博客
09-07 1869
组件 aaa 直接复制代码，中间还emit 发射监听屏幕变化。使用css单位 放大缩小自适应全屏等比缩放。
图片一直居中，并且窗口变小图片两端缩小，但是图片还是居中。
qq_34569508的博客
07-24 36
1、无论多少行都让文字垂直居中； 小技巧 ie8以上可用； display：table-cell；vertical-align：middle； 注意变了 table-cell就不能用float和position了，用了的话table-cell的vertical-align不生效了； table-cell不支持margin但可以用padding； 2、让img在窗口变小时，图片一直居中显示，但不...
解决css中div随窗口大小变化而变化
烟溪彭于晏的博客
07-12 9593
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
CSS流动布局-页面自适应
qq_20382175的博客
03-11 422
的元素布局是从左往右依次排列，块级元素从上往下排列，我们所说的脱离文档流也就是该元素从流中漂浮起来，与之前的元素不在同一个层级而形成的不占位效果。流的应用除了更改文档的水平流以外，还可以用来做对称布局，例如微信聊天页，更改。有了流这个概念后，我们可以通过更改流的水平流向来更改元素的排列方向。如果是行内元素，只需要更改水平流向即可实现元素的左右对齐。的水平流向，即可实现微信的自身和对方的聊天气泡定位。的概念，这种布局自然自动，像水流一样。属性影响的，如果文档的水平流向为右向左，那么。表示开始位置（左），
CSS实现图片放大缩小的几种方法
qq_44792224的博客
01-17 3161
常用使用img标签，制定width或者height的任意一个，图片会自动等比例缩小。但是不知道为什么我在uniapp小程序中这样写并没有等比缩小。使用CSS3新属性，transform的scale。
meta设置手机端访问电脑端页面_meta 设置viewport到底有何用
weixin_39983563的博客
12-19 756
# 先说结论如果页面本身是移动端的设计风格，设计师在设计页面时按移动端通用的375px或者428px来做设计，我们需要在head标签里加<meta name="viewport" content="width=device-width">。如果原本就是针对PC浏览器设计的页面未适配过移动端，不推荐加此meta。<meta name="viewport" content="widt...
css样式 图片居中如何实现
09-05
### 回答1： 可以使用以下两种方法来实现图片居中的效果： 1. 使用CSS的text-align属性和display属性来实现： ``` <img src="yourimage.jpg" alt="Image" style="display:block; margin:auto; text-align:center;"> ``` 2. 使用CSS的flexbox布局来实现： ``` <div style="display:flex; justify-content:center;"> <img src="yourimage.jpg" alt="Image"> </div> ``` 这两种方法都可以将图片水平和垂直居中。第一种方法将图片设置为块级元素，然后使用margin:auto来使其水平居中，使用text-align:center来使其垂直居中。第二种方法使用flexbox布局，将包含图片的容器设置为flex容器，并使用justify-content:center来使其水平居中。 ### 回答2： 在CSS中实现图片居中有多种方法，下面我将介绍两种常用的方法： 方法一：使用flex布局 1. 首先，在图片所在的父元素上添加以下CSS样式： ```css display: flex; justify-content: center; align-items: center; ``` 这样设置后，父元素会使用flex布局，并将其中的子元素居中显示。 2. 然后，在图片元素上添加以下CSS样式： ```css max-width: 100%; max-height: 100%; ``` 这会保证图片在超出父元素大小时不会溢出，并始终保持其原始比例。 方法二：使用绝对定位和transform属性 1. 首先，在图片所在的父元素上添加以下CSS样式： ```css position: relative; ``` 2. 接着，将图片元素的CSS样式设置如下： ```css position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ``` 这样设置后，图片会相对于其父元素居中显示。 无论使用哪种方法，都可以实现图片的水平和垂直居中显示。根据实际情况选择合适的方法即可。 ### 回答3： 要实现图片在CSS样式中居中，可以使用以下几种方法： 1. 使用text-align属性：将图片放置在一个父容器内，然后设置父容器的text-align属性为center。这样图片就会水平居中。 ``` <div style="text-align: center;"> <img src="图片链接" alt="图片描述"> </div> ``` 2. 使用margin属性：通过设置图片的左右外边距为auto，可以使图片水平居中。 ``` <img src="图片链接" alt="图片描述" style="display: block; margin-left: auto; margin-right: auto;"> ``` 3. 使用flex布局：将图片放置在一个容器中，然后使用flex布局将其居中。 ``` <div style="display: flex; justify-content: center; align-items: center;"> <img src="图片链接" alt="图片描述"> </div> ``` 4. 使用position属性：设置图片的position属性为absolute，然后使用left和top属性配合transform属性可以使其水平垂直居中。 ``` <div style="position: relative;"> <img src="图片链接" alt="图片描述" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"> </div> ``` 以上是实现图片居中的几种常用方法，可以根据具体情况选择合适的方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Amodoro

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

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

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

打赏作者

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

抵扣说明：

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

余额充值