包裹着img的标签大小固定，img不固定大小时的图片垂直居中

最新推荐文章于 2023-01-04 16:42:23 发布

游尘牙

最新推荐文章于 2023-01-04 16:42:23 发布

阅读量2.3k

点赞数 1

分类专栏：布局文章标签：图片 javascript img垂直居中不固定大小

本文链接：https://blog.csdn.net/dydjtb/article/details/78818529

版权

当img标签尺寸不固定且需要在容器内垂直居中时，可以通过js动态获取图片大小并设置样式来实现。关键在于利用Image对象获取图片尺寸，然后调整样式。这种方法适用于图片与容器尺寸相差不大的情况，若图片过大，应限制其大小以保持居中有意义。

摘要由CSDN通过智能技术生成

当前有这样一个需求，用一个容器去装载一个不确定大小的img标签，但又需要这个图片是垂直居中的效果，由于无法预先确定图片大小，因此也就无法使用css中常用的方法去实现其垂直居中的效果，能够想到的就是通过js动态取得图片的大小，再根据这个图片的大小去重新调整设置其样式，从而达到一个垂直居中的效果。

下面附上代码及详细说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片垂直水平居中实现方式</title>
    <style>
        .img-box{
            margin: 20px auto;
            position: relative;
            width: 100px;
            height: 100px;

最低0.47元/天解锁文章

游尘牙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
包裹着img的标签大小固定，img不固定大小时的图片垂直居中

当前有这样一个需求，用一个容器去装载一个不确定大小的img标签，但又需要这个图片是垂直居中的效果，由于无法预先确定图片大小，因此也就无法使用css中常用的方法去实现其垂直居中的效果，能够想到的就是通过js动态取得图片的大小，再根据这个图片的大小去重新调整设置其样式，从而达到一个垂直居中的效果。下面附上代码及详细说明：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫