图像并未达到所选的高度。

huangapple
go评论71阅读模式
英文:

Image isn't with the chosen height

问题

I'm trying to make this purple square looks like this image:

图像并未达到所选的高度。

But mine looks like this from the code. Why the square isn't with the height that I put?

.motivosContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.motivo {
  width: 311px;
  background-color: gray;
  border-radius: 15px;
  height: 56px;
  position: relative;
  text-align: center;
}

.motivo::after {
  content: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
  position: absolute;
  left: 0;
  top: 0;
  height: 56px;
  width: 56px;
}

<section id="motivos" class="py-5">
  <div class="container col-sm-10">
    <h2 class="titulo text-center mx-5 mb-4">A <span>terapia online</span> é para você que busca tratar e superar... </h2>
    
    <div class="motivosContent text-center">
      <div class="motivo py-3">Ansiedade</div>
      <div class="motivo py-3">Depressão</div>
      <div class="motivo py-3">Burnout</div>
      <div class="motivo py-3">TDAH</div>
      <div class="motivo py-1">Problemas nos<br>relacionamentos</div>
    </div>
  </div>
</section>
英文:

I'm trying to make this purple square looks like this image:

图像并未达到所选的高度。

But mine looks like this from the code. Why the square isn't with the height that i put?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.motivosContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.motivo {
  width: 311px;
  background-color: gray;
  border-radius: 15px;
  height: 56px;
  position: relative;
  text-align: center;
}

.motivo::after {
  content: url(&#39;https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg&#39;);
  position: absolute;
  left: 0;
  top: 0;
  height: 56px;
  width: 56px;
}

<!-- language: lang-html -->

&lt;section id=&quot;motivos&quot; class=&quot;py-5&quot;&gt;
  &lt;div class=&quot;container col-sm-10&quot;&gt;
    &lt;h2 class=&quot;titulo text-center mx-5 mb-4&quot;&gt;A &lt;span&gt;terapia online&lt;/span&gt; &#233; para voc&#234; que busca tratar e superar...&#160;&lt;/h2&gt;
    
    &lt;div class=&quot;motivosContent text-center&quot;&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;Ansiedade&lt;/div&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;Depress&#227;o&lt;/div&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;Burnout&lt;/div&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;TDAH&lt;/div&gt;
      &lt;div class=&quot;motivo py-1&quot;&gt;Problemas nos&lt;br&gt;relacionamentos&lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

答案1

得分: 1

Set it as the background-image instead on the pseudo-element.
将其设置为伪元素上的background-image。

Also, forgot to close your .container div.
还有，忘记关闭你的.container div。

英文:

Set it as the background-image instead on the pseudo-element.

Also, forgot to close your .container div.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.motivosContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.motivo {
  width: 311px;
  background-color: gray;
  border-radius: 15px;
  height: 56px;
  position: relative;
  text-align: center;
}

.motivo::after {
  content: &quot;&quot;;
  background-image: url(&#39;https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg&#39;);
  background-size: cover;
  background-position: center;
  position: absolute;
  border-radius: 15px;
  left: 0;
  top: 0;
  height: 56px;
  width: 56px;
}

<!-- language: lang-html -->

&lt;section id=&quot;motivos&quot; class=&quot;py-5&quot;&gt;
  &lt;div class=&quot;container col-sm-10&quot;&gt;
    &lt;h2 class=&quot;titulo text-center mx-5 mb-4&quot;&gt;A &lt;span&gt;terapia online&lt;/span&gt; &#233; para voc&#234; que busca tratar e superar...&#160;&lt;/h2&gt;
    &lt;div class=&quot;motivosContent text-center&quot;&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;Ansiedade&lt;/div&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;Depress&#227;o&lt;/div&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;Burnout&lt;/div&gt;
      &lt;div class=&quot;motivo py-3&quot;&gt;TDAH&lt;/div&gt;
      &lt;div class=&quot;motivo py-1&quot;&gt;Problemas nos&lt;br&gt;relacionamentos&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

答案2

得分: 0

你可以尝试使用 background-image 和 background-size 替代 content。我在图片上添加了边框半径，这样可以减少空白区域，以便复制您发布的图片。并将灰色改为浅灰色，这没有太大区别。

英文:

You can try using background-image & background-size instead of content. I added a border radius to the image so it will cut down the whitespace to copy the image you posted. And changed the gray to light gray which is not significant.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.motivosContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.motivo {
    width: 311px;
    background-color: lightgray;
    border-radius: 15px;
    height: 56px;
    position: relative;
    text-align: center;
}

.motivo::after {
    content: &quot;&quot;;
    position: absolute;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    background-image: url(&#39;https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg&#39;);
    background-size: cover;
    border-radius: 15px;
}

<!-- language: lang-html -->

&lt;section id=&quot;motivos&quot; class=&quot;py-5&quot;&gt;
&lt;div class=&quot;container col-sm-10&quot;&gt;
    &lt;h2 class=&quot;titulo text-center mx-5 mb-4&quot;&gt;A &lt;span&gt;terapia online&lt;/span&gt; &#233; para voc&#234; que busca tratar e superar... &lt;/h2&gt;
    &lt;div class=&quot;motivosContent text-center&quot;&gt;
        &lt;div class=&quot;motivo py-3&quot;&gt;Ansiedade&lt;/div&gt;
        &lt;div class=&quot;motivo py-3&quot;&gt;Depress&#227;o&lt;/div&gt;
        &lt;div class=&quot;motivo py-3&quot;&gt;Burnout&lt;/div&gt;
        &lt;div class=&quot;motivo py-3&quot;&gt;TDAH&lt;/div&gt;
        &lt;div class=&quot;motivo py-1&quot;&gt;Problemas nos&lt;br&gt;relacionamentos&lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

答案3

得分: 0

以下是翻译好的部分：

"Unclear if you ARE using bootstrap but here I use it but also put some custom CSS in where I use grid and position an element to the left and one to the right. This does NOT use the custom jpg background but just uses a background color and a radius on the element. Some of the grid could also be simply done with bootstrap classes but included here just to illustrate a pure CSS example."

"Note also I can change the color of the icons with the use of something besides the white: color: #FFFFFF; for example a lime green color: #00FF00;"

""

""

".motivosContent {
box-sizing: border-box;
display: grid;
grid-template-columns: 3.5rem 19.5rem;
grid-auto-rows: : 3.5rem;
align-items: center;
gap: 0;
row-gap: 1rem;
}"

".motivo {
grid-column: 2;
background-color: #80808088;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
text-align: center;
z-index: -1;
margin-left: -0.25em;
}"

".image-container {
align-self: center;
justify-self: center;
border-radius: 1rem;
grid-column: 1;
height: 100%;
background-color: #712CF9;
color: #FFFFFF;
font-size: 1.6em;
}"

""

"<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">"

"<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">"

"<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">"

"<section id="motivos" class="py-5">"
"<div class="container col-sm-10">"
"<h2 class="titulo text-center mx-5 mb-4">A terapia online é para você que busca tratar e superar... 

"
"<div class="motivosContent align-middle text-center fw-bold fs-3">"
"<div class="image-container px-3 bi bi-emoji-dizzy ">

"
"<div class="motivo py-3 ">Ansiedade

"
"<div class="image-container px-3 bi bi-cloud-drizzle ">