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

最新推荐文章于 2024-05-23 11:57:22 发布
最新推荐文章于 2024-05-23 11:57:22 发布
阅读量4.3k 收藏 4
点赞数 1
分类专栏： 前端 文章标签： css 图片垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Einstellung/article/details/114579404
版权

实现代码

我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。

对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。

建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中

下面是代码：

<!DOCTYPE html>
<html>
    <head>
        <title>这是个标题</title>
        <style type="text/css">
          div {
    
            width: 700px;
最低0.47元/天 解锁文章
Einstellung
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css 图片居中放大,不同比例图片居中缩放显示的三种方法
weixin_33855578的博客
08-03 4049
效果方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示，兼容性最好HTML代码 复制代码CSS代码.img-box{/*限定图片盒子宽高*/width:500px;height:500px;}img{width:auto;height:auto;max-width:100%;max-height:100%;/*不定宽高的图片居中显示*/position: rel...
css设置缩放中心点,JQuery控制图片由中心点逐渐放大效果
weixin_32657693的博客
08-03 1306
有的时候我们需要做一个当鼠标放置在图片上的时候，希望图片逐渐变大，即图片的width和height逐渐变大，但是此时，其left值与top值没有改变，故看似不是从中心点进行缩放的。如下图：从中心点进行缩放实现代码如下：#div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; ...
css样式 图片随页面拉伸或缩小居中布局
最新发布
xxx
05-23 166
【代码】css样式 图片随页面拉伸缩小居中。
html css 图片缩放等居中显示代码
u010698385的专栏
01-09 2908
$(document).ready(function () {             var maxWidth = document.documentElement.clientWidth; // 图片最大宽度              var maxHeight = document.documentElement.clientHeight; // 图片最大高度
图片拉伸：拉伸两边，保持中间不动
Secret Island
11-19 6620
原文地址：https://www.jianshu.com/p/9352091f3a94   1.想要实现一个弹框，是对某项事务的说明，效果如下 2.试过使用slicing 不论你怎么调，中间的那个小尖尖都会变形或者是没有拉伸的效果，或者拉成很奇怪的东西 3.所以用代码来实现了 思路 既然要保证中间不变拉伸两边，那我们先拉伸左边，然后得到的图片拿来再拉伸右边，保证两次拉伸的距离...
html拉伸图片不平铺,求救图片居中图片拉伸问题？_html/css_WEB-ITnose
weixin_33302195的博客
06-04 245
1、怎么设置能把table中的图片放到div居中的位置；2、div的背景图片怎么能够设置到横向拉伸，而不是平铺效果。回复讨论(解决方案)2。不能1.不是三列么 ，怎么还居中？2。不能1.不是三列么 ，怎么还居中？现在效果是这样的 我想把图片放到黑色框中ie几 啊 我的怎么没这个问题呢 猜测一下：table{ border-collapse:colla...
js+CSS 图片等比缩小并垂直居中实现代码
10-30
总的来说，这个例子提供了一种在不支持`object-fit`的浏览器中实现图片等比缩放和垂直居中的解决方案。然而，为了更好的跨浏览器兼容性和代码简洁性，推荐使用`object-fit`结合适当的浏览器前缀和回退策略。
CSS实现网页背景图片自适应全屏的方法
12-09
为了适应不同设备的屏幕尺寸，并保证图片不因拉伸而失真，我们需要使用CSS来实现背景图片的自适应全屏显示。本文将详细解析如何通过CSS来达成这一目标。 首先，我们需要在HTML中创建一个div元素作为背景图片的容器...
VMiddleImg图片居中裁切效果
04-28
在"VMiddleImg图片居中裁切效果"的实现中，开发者可能结合了以上所述的CSS属性和技术，同时考虑到旧版本IE浏览器的兼容性问题，可能还使用了条件注释、CSS Hack或者JavaScript库（如jQuery）来实现跨浏览器的支持。...
VMiddleImg图片居中裁切效果特效代码
03-20
【VMiddleImg图片居中裁切效果特效代码】是一种在网页设计中实现图片居中裁剪的技术，主要用于解决图片在不同尺寸的设备上显示时，能够保持关键内容居中且完整展示的问题。这一技术通常结合CSS3和JavaScript来实现，...
图片缩放、拖动、浏览，不留白，自动居中、防止动画闪
12-19
这可以通过设置图片容器的CSS样式，如`background-size: cover`或`object-fit: cover`来实现，使得图片始终充满整个容器，保持其纵横比。 “自动居中”则是让图片在容器中始终保持水平和垂直居中。可以使用CSS的`...
设置css大图背景不被拉伸、全屏显示、自动居中（会被裁剪）
YourNikee的博客
11-20 2783
width:100%; height:100%; background:url('imgUrl'); background-size:cover; background-position: center;
css中如何让过宽的图片在页面中居中显示
sunsineq的专栏
08-03 755
在做网页的时候，插入一张图片，发现这张图片过宽，中间重要的内容不能完全显示出来，如下图所示 如果让这张图片居中，岂不是美滋滋，但又发现了一个尴尬的问题，因为图片是在body中的，没办法居中。此时可能有人会想到可以使用定位让图片向左移动，这样虽然可以解决，但有个问题，如果用户缩放页面的话，这张图片又会变得不居中。 是不是无解了，那就来看看我这种近似完美的方法吧。 先看看刚刚那张图片的的位置,可以看到图片超过了浏览器窗口 接下来先对图片进行绝对定位(或相对定位)，相对左边框50%， p..
html css背景图居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法
weixin_39875629的博客
06-28 1741
写这篇水文呢，也是最近在自己在魔改一个主题用作新做的班级网站。发现模版的背景图片以及其他地方的图片显示只能在电脑端看到，而在移动端不能够自适应。顺便也整理出来。首先是图片的居中自适应：需要先给CSS background-repeat 属性赋值no-repeat，使图片不重复只显示一张。然后再定位背景图像位置，给CSS background-position 属性赋值center，设置水平和垂直都...
css控制图片拉伸不变形,css+background实现 图片宽高自适应，拉伸裁剪不变形
weixin_39598568的博客
08-03 2491
图片宽高不固定 ，一样实现自适应，拉伸裁剪不变形，适应各大兼容性。下面咱们在网上找两张宽高不一样的照片：No.1 No.2 从上图看一个宽的一个窄的，很难做到自适应，无奈可恶的产品经理，只能自己想办法了请看下面图片，经在各大浏览器和手机端测试，是好用的咱们先来个对比：好用 ...
css实现图片中部居中，等比缩放不变形
qq_27309221的博客
06-11 996
最近有小伙伴问我图片居中并且不变形的样式怎么实现，在这里我把我用到的方式贴出来和大家分享一下： <div class="rela-img"> <img src="../images/avatar.jpg" /> </div> <style> .rela-img{ position: relative; width: 200px; height: 200px; background: #ccc; overflow: hidden; } .rela-
css图片居中剪切，避免图片变形
weixin_45827203的博客
02-26 550
参考链接： css图片居中剪切，避免图片变形 https://blog.csdn.net/baidu_41205301/article/details/78764775
css——背景图片 保持比例不变形
努力、拼搏、奋进
06-20 3334
css——背景图片 保持比例不变形
css 如何让背景图片拉伸填充避免重复显示
weixin_34099526的博客
10-08 462
如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类： 1.是一整张大图...
web图片居中 缩放时候以图片中心放大缩小代码实现
06-02
你可以使用CSS来实现Web图片的居中和缩放。下面是一个示例代码： HTML： ```html <div class="image-container"> <img src="your-image-url" alt="your-image-description"> </div> ``` CSS： ```css .image-container { display: flex; justify-content: center; align-items: center; height: 400px; /* 设置容器高度 */ } .image-container img { max-width: 100%; max-height: 100%; object-fit: contain; } ``` 解释： 1. `.image-container` 元素设置为 `display: flex`，让其内部的元素（图片）水平和垂直居中。 2. `height` 属性设置容器高度，可以根据实际情况来调整。 3. `img` 元素设置 `max-width: 100%; max-height: 100%`，让其不会超出容器范围。 4. `object-fit: contain` 让图片在缩放时保持比例，并以图片中心为基准进行缩放。 这样，你就可以实现Web图片的居中和缩放了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Einstellung

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

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

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

打赏作者

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

抵扣说明：

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

余额充值