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

将SVG缩放到相同的高度，并在Flexbox中排入1行

发布于 2025-01-31 16:50:11 字数 4902 浏览 2 评论 0原文

我正在尝试创建一个包含公认付款图标的横幅。我想缩放图像，以使它们最终都具有相同的高度，其中该高度是最大可能的，以使图像都适合一行。这些图像的大小或宽高比并不是全部相同（例如，它们不仅仅是信用卡，还包括万事达卡ID检查徽标）。

我在野生动物园中工作，但它在铬或firefox中都无法使用（并且失败的失败）。

所需结果（Safari）：

”在此处输入图像描述”

Chrome失败情况，所有图像适合行，并非所有高度都设置了相同的设置：

​相同的高度，但包装纸溢出了挠性容器：

”在此处输入图像描述

最初，我只是将＆lt; img＆gt; s放入Flex容器的孩子（实际上，最初，最初，最初，我试图将所有SVG放入SVG视图精灵中，但最终以许多其他方式失败了，这使我花了很长时间才能诊断），但是在这里戳了一段时间之后，很明显我需要要将它们包裹在另一组＆lt; div＆gt; s中，请缩放这些divs（Flex容器的子女），然后让图像的大小自动调整。这里的大多数示例都涉及缩放另一个方向，但是我只是换了宽度/高度参数，并认为我很好（Safari是我的默认浏览器）。

跨浏览器的方法是什么？

html：

<div class="payment-icons">
    <div class="icon-container">
        <img class="icon payment-icon" src="1.svg">
    </div>
    <div>...</div>
    ...
</div>

CSS：

// flex container
.payment-icons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    max-width: 281px;
    margin-left: auto;
    margin-right: auto;
}

// flex items
.payment-icons .icon-container {
    min-width: auto;
}

// images
img { // from an earlier rule; included here in case it matters
    display: block;
    height: auto;
    max-width: 100%;
}

img.payment-icon {
    height: auto;
    width: 100%;
}

您可以在此片段中看到它可行（是否取决于您的浏览器）：

.payment-icons {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  max-width: 281px;
  margin-left: auto;
  margin-right: auto;
}

.payment-icons .icon-container {
  min-width: auto;
}

.payment-icons .icon-container:not(:last-child) {
  padding-right: 5px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

img.payment-icon {
  height: auto;
  width: 100%;
}
<html>

<body>
  <div class="payment-icons">
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-1-payment-icon-visa" src="https://www.dropbox.com/s/wxk2xjzo52e2p9d/1-payment-icon-visa.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-2-payment-icon-mc" src="https://www.dropbox.com/s/vzev285htn06dmk/2-payment-icon-mc.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-3-payment-icon-amex" src="https://www.dropbox.com/s/eur0beji6qep55p/3-payment-icon-amex.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-4-payment-icon-up" src="https://www.dropbox.com/s/zvni8pygvob2vvi/4-payment-icon-up.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-5-payment-icon-cb" src="https://www.dropbox.com/s/227ujpum81gigsc/5-payment-icon-cb.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-6-payment-icon-visa-secure" src="https://www.dropbox.com/s/p5zr6atbjfac6i5/6-payment-icon-visa-secure.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-7-payment-icon-mc_idcheck" src="https://www.dropbox.com/s/5y26briolgpmko6/7-payment-icon-mc_idcheck.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
  </div>
</body>

</html>

理想情况下，我想用html/css解决这个问题，但是如果推挤，我可以编辑SVG。我什至尝试天真地修改它们。前四个项目都在＆lt; svg＆gt;标签中设置了高度和宽度，而最后三个则将其设置在第一个边界矩形内，这可能是问题。因此，例如，签证卡：

<svg width="750" height="471" viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg">
    <path...

虽然万事达卡ID检查：

<svg id="a5689fc5-8d5e-4b19-817c-171f8cabf65a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.16287 144">
    <rect width="504.16287" height="144" style="fill:none"/>
    ...

我尝试以各种不同的组合中的MasterCard ＆lt; svg＆gt;添加宽度和高度，但似乎并没有重要。就像我说的那样，我宁愿不喜欢这个猴子，但是如果那是唯一的方法，我可以。

原文

I'm trying to create a banner which contains accepted payment icons. I want to scale the images such that they all end up with the same height, where that height is the maximum possible such that the images all fit in one row. The images are not all the same size or aspect ratio (because, for example, they aren't just credit cards, they include the MasterCard ID Check logo).

I have this working in Safari, but it doesn't work in either Chrome or Firefox (and fails differently).

Desired outcome (Safari):

enter image description here

Chrome failure case, all the images fit in the row, not all heights are set the same:

enter image description here

Firefox failure case, all images scaled to same height, but the wrappers overflow the flex container:

enter image description here

Initially, I had just put the <img>s in as the children of the flex container (actually, initially initially, I tried to put all the svgs into an svg view sprite, but that ended up failing in lots of other ways that it was taking me too long to diagnose), but after poking around here a while, it became clear that I needed to wrap them in another set of <div>s, scale those divs (the children of the flex container), and then let the size of the images auto adjust. Most of the examples on here deal with scaling the other direction, but I just swapped the width/height parameters, and thought I was good (Safari is my default browser).

What's the cross-browser way to get my desired outcome?

HTML:

<div class="payment-icons">
    <div class="icon-container">
        <img class="icon payment-icon" src="1.svg">
    </div>
    <div>...</div>
    ...
</div>

CSS:

// flex container
.payment-icons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    max-width: 281px;
    margin-left: auto;
    margin-right: auto;
}

// flex items
.payment-icons .icon-container {
    min-width: auto;
}

// images
img { // from an earlier rule; included here in case it matters
    display: block;
    height: auto;
    max-width: 100%;
}

img.payment-icon {
    height: auto;
    width: 100%;
}

You can see it working (or not, depending on your browser) in this snippet:

.payment-icons {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  max-width: 281px;
  margin-left: auto;
  margin-right: auto;
}

.payment-icons .icon-container {
  min-width: auto;
}

.payment-icons .icon-container:not(:last-child) {
  padding-right: 5px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

img.payment-icon {
  height: auto;
  width: 100%;
}
<html>

<body>
  <div class="payment-icons">
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-1-payment-icon-visa" src="https://www.dropbox.com/s/wxk2xjzo52e2p9d/1-payment-icon-visa.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-2-payment-icon-mc" src="https://www.dropbox.com/s/vzev285htn06dmk/2-payment-icon-mc.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-3-payment-icon-amex" src="https://www.dropbox.com/s/eur0beji6qep55p/3-payment-icon-amex.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-4-payment-icon-up" src="https://www.dropbox.com/s/zvni8pygvob2vvi/4-payment-icon-up.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-5-payment-icon-cb" src="https://www.dropbox.com/s/227ujpum81gigsc/5-payment-icon-cb.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-6-payment-icon-visa-secure" src="https://www.dropbox.com/s/p5zr6atbjfac6i5/6-payment-icon-visa-secure.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-7-payment-icon-mc_idcheck" src="https://www.dropbox.com/s/5y26briolgpmko6/7-payment-icon-mc_idcheck.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
  </div>
</body>

</html>

I'd ideally like to solve this with HTML/CSS, but if push comes to shove, I can edit the SVGs. I even tried naively modifying them. The first four items all have height and width set in the <svg> tag, whereas the last three set it inside the first bounding rectangle, and it crossed my mind that that might be the issue. So, e.g., the Visa card:

<svg width="750" height="471" viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg">
    <path...

whereas the MasterCard ID Check:

<svg id="a5689fc5-8d5e-4b19-817c-171f8cabf65a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.16287 144">
    <rect width="504.16287" height="144" style="fill:none"/>
    ...

I tried adding width and height to the Mastercard <svg> in various different combinations, but it seems not to have mattered. As I said, I'd prefer not to monkey with this, but if that's the only way, I can.

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

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

发布评论

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

评论（1）

寄意 2025-02-07 16:50:11

添加了修复高度到图像：width：3REM，还对.payment-icons中的项目对齐，例如align-items ：中心;

.payment-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  max-width: 281px;
  margin-left: auto;
  margin-right: auto;
}

.payment-icons .icon-container {
  min-width: auto;
}

.payment-icons .icon-container:not(:last-child) {
  padding-right: 5px;
}

img {
  display: block;
  height: 3rem;
  max-width: 100%;
}

img.payment-icon {
  height: 3rem;
  width: 100%;
}
<html>

<body>
  <div class="payment-icons">
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-1-payment-icon-visa" src="https://www.dropbox.com/s/wxk2xjzo52e2p9d/1-payment-icon-visa.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-2-payment-icon-mc" src="https://www.dropbox.com/s/vzev285htn06dmk/2-payment-icon-mc.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-3-payment-icon-amex" src="https://www.dropbox.com/s/eur0beji6qep55p/3-payment-icon-amex.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-4-payment-icon-up" src="https://www.dropbox.com/s/zvni8pygvob2vvi/4-payment-icon-up.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-5-payment-icon-cb" src="https://www.dropbox.com/s/227ujpum81gigsc/5-payment-icon-cb.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-6-payment-icon-visa-secure" src="https://www.dropbox.com/s/p5zr6atbjfac6i5/6-payment-icon-visa-secure.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-7-payment-icon-mc_idcheck" src="https://www.dropbox.com/s/5y26briolgpmko6/7-payment-icon-mc_idcheck.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
  </div>
</body>

</html>

Added fix height to the images: width: 3rem and also aligned the items in the .payment-icons such as align-items: center;

.payment-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  max-width: 281px;
  margin-left: auto;
  margin-right: auto;
}

.payment-icons .icon-container {
  min-width: auto;
}

.payment-icons .icon-container:not(:last-child) {
  padding-right: 5px;
}

img {
  display: block;
  height: 3rem;
  max-width: 100%;
}

img.payment-icon {
  height: 3rem;
  width: 100%;
}
<html>

<body>
  <div class="payment-icons">
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-1-payment-icon-visa" src="https://www.dropbox.com/s/wxk2xjzo52e2p9d/1-payment-icon-visa.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-2-payment-icon-mc" src="https://www.dropbox.com/s/vzev285htn06dmk/2-payment-icon-mc.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-3-payment-icon-amex" src="https://www.dropbox.com/s/eur0beji6qep55p/3-payment-icon-amex.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-4-payment-icon-up" src="https://www.dropbox.com/s/zvni8pygvob2vvi/4-payment-icon-up.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-5-payment-icon-cb" src="https://www.dropbox.com/s/227ujpum81gigsc/5-payment-icon-cb.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-6-payment-icon-visa-secure" src="https://www.dropbox.com/s/p5zr6atbjfac6i5/6-payment-icon-visa-secure.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-7-payment-icon-mc_idcheck" src="https://www.dropbox.com/s/5y26briolgpmko6/7-payment-icon-mc_idcheck.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
  </div>
</body>

</html>

回复 原文
~没有更多了~

关于作者

摘星┃星的人

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

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

推荐作者

牛↙奶布丁

文章 0 评论 0

COSO

文章 0 评论 0

落叶

文章 0 评论 0

暗地喜欢

文章 0 评论 0

qq_i8qOEG

文章 0 评论 0

qq_Wl4Sbi

文章 0 评论 0

更多

友情链接

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