麻烦使一排图像响应迅速

发布于 2025-02-01 11:57:29 字数 696 浏览 2 评论 0原文

我只想制作一排响应迅速的图像。首先，我想将图像的大小减少20％。无论出于何种原因，我都无法正常工作。我正在使用Bundler Vite BTW，必须将图像源存储在CSS中，例如代码中的此处。

<div class="business">
<img class="firstb" alt="firstb">
<img class="secondb" alt="secondb">
<img class="thirdb" alt="thirdb">
<img class="fourthb" alt="fourthb">
<img class="fifthb" alt="fifthb">
</div>

.business {
  margin: 0 7em;
  display: flex;
}
.firstb {
  content:url(./img/business/firstb.png);
}
.secondb {
  content:url(./img/business/secondb.png);
}
.thirdb {
  content:url(./img/business/thirdb.png);
}
.fourthb {
  content:url(./img/business/fourthb.png);
}
.fifthb {
  content:url(./img/business/fifthb.png);
}

原文

I just want to make a row of images that are responsive. To begin with though I want to reduce the size of the images by 20%. For whatever reason I can't get this to work. I am using the bundler Vite btw and have to store the source of the image in the css like here in the code.

<div class="business">
<img class="firstb" alt="firstb">
<img class="secondb" alt="secondb">
<img class="thirdb" alt="thirdb">
<img class="fourthb" alt="fourthb">
<img class="fifthb" alt="fifthb">
</div>

.business {
  margin: 0 7em;
  display: flex;
}
.firstb {
  content:url(./img/business/firstb.png);
}
.secondb {
  content:url(./img/business/secondb.png);
}
.thirdb {
  content:url(./img/business/thirdb.png);
}
.fourthb {
  content:url(./img/business/fourthb.png);
}
.fifthb {
  content:url(./img/business/fifthb.png);
}

分享到QQ

分享到微博

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

发布评论

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

月寒剑心 2025-02-08 11:57:29

您应该给Flexbox的子元素一个宽度：

.business {
    margin: 0 7em;
    display: flex;
    flex-flow: row wrap;
}

.business img {
    flex: 0 0 20%;
    width: 20%; //fallback
    height: auto;
}

<div class="business">
    <img alt="firstb" src="http://via.placeholder.com/400">
    <img alt="secondb" src="http://via.placeholder.com/400">
    <img alt="thirdb" src="http://via.placeholder.com/400">
    <img alt="fourthb" src="http://via.placeholder.com/400">
    <img alt="fifthb" src="http://via.placeholder.com/400">
</div>

You should give the child elements of a flexbox a width:

.business {
    margin: 0 7em;
    display: flex;
    flex-flow: row wrap;
}

.business img {
    flex: 0 0 20%;
    width: 20%; //fallback
    height: auto;
}

<div class="business">
    <img alt="firstb" src="http://via.placeholder.com/400">
    <img alt="secondb" src="http://via.placeholder.com/400">
    <img alt="thirdb" src="http://via.placeholder.com/400">
    <img alt="fourthb" src="http://via.placeholder.com/400">
    <img alt="fifthb" src="http://via.placeholder.com/400">
</div>

回复收藏 0 原文

~没有更多了~