文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将边框设置为与图片相同的大小

问如何将边框设置为与图片相同的大小
EN

Stack Overflow用户

提问于 2022-05-04 09:30:24

回答 1查看 54关注 0票数 0

我想用一个过滤器选项来标记一个站点，所以我想把过滤器放在左边，项目放在右边。

我为这些项目做了一个可滚动的div，边框与图片的大小不一样，这适用于所有的项目，它应该看起来类似于所显示的图片。我还没有编写脚本，但下面是我的代码：

<html>

<head>
  <title></title>

  <style>
    #vezivanje {
      background-color: hotpink;
      height: 80px;
      display: flex;
      align-items: center;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      font-size: 20px;
    }
    
    img {
      height: auto;
      max-width: 80%;
    }
    
    #filter {
      position: fixed;
      width: 300px;
      height: 900px;
      border-right: solid;
      border-color: #9f2b68;
      border-right-width: 2px;
      padding-left: 15px;
      padding-top: 30px;
      margin: 10px;
    }
    
    #container {
      position: relative;
      display: grid;
      float: right;
      overflow: scroll;
      width: 1560px;
      height: 850px;
      margin: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 1vh;
    }
    
    .item {
      border-style: solid;
      border-color: #9f2b68;
      margin: 10px;
      border-width: 2px;
    }
    
     ::-webkit-scrollbar {
      display: none;
    }
    
    body {
      background-color: #e2e3e3;
    }
  </style>

</head>

<body>
  <div id="sve">
    <div id="vezivanje">
      <span class="upustvo">
            <a style="text-decoration:none"><span style="color:white;font-weight:bold">Domaci zadatak</span></a>
      </span>
    </div>

    <div id="filter">
      <div id="uzrast">
        <h2>Uzrast:</h2>
        <p><input type="radio">0+</p>
        <p><input type="radio">3+</p>
        <p><input type="radio">6+</p>
        <p><input type="radio">10+</p>
      </div>

      <div id="cena">
        <h2>Cena:</h2>
        <p>0<input type="range">10.000</p>
      </div>
    </div>

    <div id="container"></div>
  </div>
  <script>
    //--------------------------

    let container = document.querySelector("#container");
    let igracke = [];

    function igrackeinfo(slika, godine, cena) {
      this.slika = slika;
      this.godine = godine;
      this.cena = cena;
    };
    igracke.push(new igrackeinfo("https://yekupi.blob.core.windows.net/ekupirs/1200Wx1200H/EK000359292_1.image", "0+", "2000 RSD"));
    igracke.push(new igrackeinfo("https://poklonizabebu.rs/wp-content/uploads/2022/02/Muzicka-igracka-kuca-Brown-2.jpg", "0+", "1500 RSD"));
    igracke.push(new igrackeinfo("https://pertinitoys.com/fajlovi/product/master-wheels-trotinet-p-0282-master-wheels-web-s_5f3fb5d70b71e.jpg", "3+", "1500 RSD"));
    igracke.push(new igrackeinfo("https://www.lego.com/cdn/cs/set/assets/blt70237dec0eef084a/10696.jpg?fit=bounds&format=jpg&quality=80&width=1600&height=1600&dpr=1", "3+", "5000 RSD"));
    igracke.push(new igrackeinfo("https://img.goglasi.com/img/225234594", "3+", "3000 RSD"));
    igracke.push(new igrackeinfo("https://www.bcgroup-online.com/upload/m/84401-lego-duplo-10915-kamion-sa-slovima-abecede.jpg", "3+", "2000 RSD"));
    igracke.push(new igrackeinfo("https://www.decjisajt.rs/files/watermark/files/thumbs/files/images/product/2018/01/29/thumbs_1200/thumbs_w/drvena-muzicka-igracka-velika-gitara-91701_1200_1200px_w.jpg", "3+", "9000 RSD"));

    igracke.forEach(t => {
      container.innerHTML += "<div class = 'item'><img src = " + t.slika + ">" +
        "<p>" + t.godine + " " + t.cena + "</p>"
      "</div>"
    })
  </script>

</body>

</html>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-05-04 17:29:02

图像的max-width设置为80%，因此始终存在20%缺口。@ishiro，但是它是一个你想要的解决方案。

width: 80%.

Tag max-width: 100%.

类.item集

这样，20%的空间就消失了，边框就会附着在图像上，而不会改变图像大小。

//--------------------------

let container = document.querySelector("#container");
let igracke = [];

function igrackeinfo(slika, godine, cena) {
  this.slika = slika;
  this.godine = godine;
  this.cena = cena;
}
igracke.push(
  new igrackeinfo(
    "https://yekupi.blob.core.windows.net/ekupirs/1200Wx1200H/EK000359292_1.image",
    "0+",
    "2000 RSD"
  )
);
igracke.push(
  new igrackeinfo(
    "https://poklonizabebu.rs/wp-content/uploads/2022/02/Muzicka-igracka-kuca-Brown-2.jpg",
    "0+",
    "1500 RSD"
  )
);
igracke.push(
  new igrackeinfo(
    "https://pertinitoys.com/fajlovi/product/master-wheels-trotinet-p-0282-master-wheels-web-s_5f3fb5d70b71e.jpg",
    "3+",
    "1500 RSD"
  )
);
igracke.push(
  new igrackeinfo(
    "https://www.lego.com/cdn/cs/set/assets/blt70237dec0eef084a/10696.jpg?fit=bounds&format=jpg&quality=80&width=1600&height=1600&dpr=1",
    "3+",
    "5000 RSD"
  )
);
igracke.push(
  new igrackeinfo("https://img.goglasi.com/img/225234594", "3+", "3000 RSD")
);
igracke.push(
  new igrackeinfo(
    "https://www.bcgroup-online.com/upload/m/84401-lego-duplo-10915-kamion-sa-slovima-abecede.jpg",
    "3+",
    "2000 RSD"
  )
);
igracke.push(
  new igrackeinfo(
    "https://www.decjisajt.rs/files/watermark/files/thumbs/files/images/product/2018/01/29/thumbs_1200/thumbs_w/drvena-muzicka-igracka-velika-gitara-91701_1200_1200px_w.jpg",
    "3+",
    "9000 RSD"
  )
);

igracke.forEach((t) => {
  container.innerHTML +=
    "<div class = 'item'><img src = " +
    t.slika +
    ">" +
    "<p>" +
    t.godine +
    " " +
    t.cena +
    "</p>";
  ("</div>");
});

#vezivanje {
  background-color: hotpink;
  height: 80px;
  display: flex;
  align-items: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 20px;
}

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

#filter {
  position: fixed;
  width: 300px;
  height: 900px;
  border-right: solid;
  border-color: #9f2b68;
  border-right-width: 2px;
  padding-left: 15px;
  padding-top: 30px;
  margin: 10px;
}

#container {
  position: relative;
  display: grid;
  float: right;
  overflow: scroll;
  width: 1560px;
  height: 850px;
  margin: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1vh;
}

.item {
  width: 80%;
  border-style: solid;
  border-color: #9f2b68;
  margin: 10px;
  border-width: 2px;
}

::-webkit-scrollbar {
  display: none;
}

body {
  background-color: #e2e3e3;
}

<div id="sve">
  <div id="vezivanje">
    <span class="upustvo">
      <a style="text-decoration:none"><span style="color:white;font-weight:bold">Domaci zadatak</span></a>
    </span>
  </div>

  <div id="filter">
    <div id="uzrast">
      <h2>Uzrast:</h2>
      <p><input type="radio">0+</p>
      <p><input type="radio">3+</p>
      <p><input type="radio">6+</p>
      <p><input type="radio">10+</p>
    </div>

    <div id="cena">
      <h2>Cena:</h2>
      <p>0<input type="range">10.000</p>
    </div>
  </div>

  <div id="container"></div>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72110725

复制

相似问题

问如何将边框设置为与图片相同的大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将边框设置为与图片相同的大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将边框设置为与图片相同的大小
EN