当前位置： 文江博客话题详情

使图像大小相同而不单独操纵其尺寸？

发布于 2025-02-09 02:03:13 字数 2640 浏览 1 评论 0原文

我试图将一些徽标连续放在每个徽标上，每个徽标都有问题是，当我给所有徽标包装器的特定宽度时，有些徽标divs有些变小，反之亦然（我知道这是由于尺寸日志{images}），但是有什么办法可以使所有徽标甚至通过单个CSS属性上的外观。

我希望我能够澄清这个问题。

任何帮助都非常感谢！

.logos-container{
    background: #ddd;
}
.logos-container .client-logo{
    width: 120px;
}
.logos-container .client-logo img{
 width: 100%;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
 <div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
            
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
            </div>
        </div>
 
 
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

原文

I am trying to put some logos in a row and a div wraps each logo the problem is that When I am giving a specific width to all the logo wrapper Divs some are becoming small and vice versa (I know it is due to the Dimension of the Logs {Images}) But is there any way we can make all the logos look even by on a single CSS property.

I hope I am able to clarify the question.

Any help is highly appreciated!

.logos-container{
    background: #ddd;
}
.logos-container .client-logo{
    width: 120px;
}
.logos-container .client-logo img{
 width: 100%;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
 <div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
            
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
            </div>
        </div>
 
 
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

情绪 2025-02-16 02:03:13

使用 object-fit 让浏览器计算计算包含图像数据大小的比例比：

.client-logo img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
}

或使用cover而不是包含，如果您希望图像完美地拟合而无需空白。

Use object-fit to let the browser calculate the containing scale ratio for the image data size:

.client-logo img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
}

or use cover instead of contain if you want the images to fit perfectly without blanks.

回复 原文
迷雾森÷林ヴ 2025-02-16 02:03:13

只需给图像提供特定的高度即可。由于徽标的尺寸不同，因此我们不能应用相等的宽度，因此让它为100％。

.logos-container .client-logo img{
  height:50px;
  width: 100%;
}

Just give a specific height to the images. We cannot apply equal width because of the different sizes of logos so let that be 100%.

.logos-container .client-logo img{
  height:50px;
  width: 100%;
}
回复 原文
爱你不解释 2025-02-16 02:03:13

设置高度而不是宽度：

.logos-container{
    background: #ddd;
}

.logos-container .client-logo img{
    height: 80px;
    width: auto;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
 <div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
            
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
            </div>
        </div>
 
 
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

Set a height instead of a width:

.logos-container{
    background: #ddd;
}

.logos-container .client-logo img{
    height: 80px;
    width: auto;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 
 <div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
            
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
            </div>
            <div class="client-logo">
                <img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
            </div>
        </div>
 
 
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

回复 原文
~没有更多了~

关于作者

跨年

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文