18910140161

HTML-如何在css中设置内容图像的宽度和高度-堆栈溢出

顺晟科技

2022-10-19 13:37:16

89

这是我的代码,我正在尝试调整

的宽度

.feature2::before{ 内容:url(./media/image-computer.png/500/100);

}

正如您所看到的,我曾尝试在容器中使用500/100调整widht,但现在我的图像不见了,我也曾尝试正常使用width和height属性调整宽度,但它不起作用,请帮助。

这是它的外观https://imgur.com/yptelhd


顺晟科技:

您可以考虑这样做,而不是添加图像url,而是使用。您可以任意设置宽度和高度。设置将确保整个空间得到利用。

@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap");

* {
  margin: 0;
  padding: 0;

  list-style-type: none;
  text-align: center;
}
body {
  height: 100vh;
  font-family: "Bai Jamjuree", sans-serif;
  display: flex;
  font-size: 18px;
}
.primary {
  color: #4a4f53;
}
.neutral {
  color: #b3b7b8;
}
.container {
  background: url(./media/bg-header-mobile.png) no-repeat top;
  background-size: contain;
  width: 23.438rem;
  height: 325.313rem;
  border: 1px red solid;
  margin: 0 auto;
  padding: 9.375rem 2rem;
}

.main_logo {
  opacity: 70%;
  width: 8.5rem;
  margin-top: 1.59rem;
}

.main_heading {
  font-size: 1.9rem;
  line-height: 1.35;
  margin-top: 3.5rem;
  width: 100%;
  margin-bottom: 1.8rem;
}
.main_content {
  margin-bottom: 3.5rem;
}

.button {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.ios {
  background: #26bba5;
  color: white;
  font-size: 700;
  padding: 15px 10px;
  border-radius: 50px;
  border-bottom: 3px #219f8a solid;
  box-shadow: 0 2px 10px #26bba5;
  margin-bottom: 1.5rem;
}
.mac {
  background: #6174ff;
  color: white;
  font-size: 700;
  padding: 15px 10px;
  border-radius: 50px;
  border-bottom: 3px #4f62da solid;
  box-shadow: 0 2px 5px #6174ff;
}

.feature1 {
  margin-top: 12rem;
}

.feature1_dis {
  margin-top: 1.8rem;
}

.feature2::before {
  content: url(./media/image-computer.png/500/100);
  
}

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航