Show image inside div

Question

Show image inside div

Asked 5 years, 11 months ago

Viewed 1,102 times

1

I have a div an image. You would need to display part of the image (centered, for example) and decrease the size of the div.

If I overflow Hidden with a width of 50% in some div above the image, it works, but there is a hole that does not align the other side.

It would be possible to decrease the div without decreasing the image?

That’s the original idea:

And that’s what I asked:

.news-section .slide-item.right-margin {
  margin-right: 13px;
}

.news-section .slide-item.column-margin {
  padding-top: 10px;
  padding-bottom: 40px;
}

.news-section .slide-item .image-box {
  position: relative;
  display: table-cell;
}

figure {
  margin: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #2681c3;
}

.news-section .slide-item .image-box img {
  border-radius: 5px;
}

.news-section .slide-item .image-box:after {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  content: '';
  border-radius: 5px;
  /* background: rgba(0, 0, 0, 0.3); */
}

.news-section .slide-item .date-box {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 30px;
  top: 40px;
  background: #2681c3;
  z-index: 9;
  border-radius: 5px;
}

.news-section .slide-item .date-box h5 {
  font-size: 27px;
  font-family: 'Larsseit-Bold';
  line-height: 20px;
  color: #ffffff;
  margin-top: 10px;
  text-transform: uppercase;
}

.news-section .slide-item .date-box h5:before {
  color: #2681c3;
  content: "\f0da";
  font-family: FontAwesome;
  position: absolute;
  right: -8px;
  top: 10px;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.news-section .slide-item .date-box h5 span {
  font-size: 15px;
  font-family: 'Larsseit-Thin';
  color: #ffffff;
}

.news-section .slide-item .inner-box {
  position: relative;
  display: table-cell;
  left: -20px;
  vertical-align: top;
  padding-top: 24px;
}

.news-section .slide-item .inner-box .info-outer {
  position: relative;
  /* padding: 30px 16px; */
  margin-right: -20px;
}

.corpo_blog {
  padding: 16px 16px 30px 16px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
}

.news-section .slide-item .inner-box .info-outer h5 {
  font-size: 20px;
  /* color: #2e2e2e; */
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: 'Larsseit-Bold';
  text-align: initial;
  display: -webkit-box;
  height: 44px;
  line-height: 22px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cor_titulos {
  color: #2e2e2e;
}

.news-section .inner-box .info-outer .link-btn {
  margin-top: 48px;
  text-align: right;
}

.news-section .inner-box .info-outer .link-btn a {
  line-height: 24px;
  text-transform: capitalize;
  transition: all 500ms ease;
  letter-spacing: .5px;
  font-family: 'Larsseit-Bold';
  font-size: 15px;
  text-align: right;
  color: #2681c3;
  text-transform: uppercase;
}

.news-section .inner-box .info-outer h6 {
  font-size: 17px;
  /* color: #2e2e2e; */
  margin-top: 10px;
  font-family: 'Larsseit-Light';
  text-align: initial;
  display: -webkit-box;
  height: 88px;
  line-height: 22px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<div class="news-section style-two">
  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12">
      <div class="slide-item column-margin right-margin">
        <div class="image-box figure_box">
          <figure class="figure_blog">
            <a href="#"><img src="https://files.incrivel.club/files/news/part_40/405910/preview-13524560-650x341-98-1519527991.jpg" alt=""></a>
          </figure>
          <div class="date-box text-center">
            <h5>03<br><span>Jul</span></h5>
          </div>
        </div>
        <div class="inner-box">
          <div class="info-outer">
            <a href="#">
              <div class="corpo_blog">
                <h5 class="cor_titulos">Carga de pneus avaliada em cerca de R$ 500 mil é recuperada pela PRF/AL</h5>
                <h6 class="cor_titulos">Um caminhão com carga avaliada em aproximadamente R$ 500 mil foi recuperado pela Polícia Rodoviária Federal (PRF/AL) na madrugada desta sexta-feira (29), nas proximidades do km 84 da BR-101, entrada da Empresa Britex Minerações, no município
                  de Rio Largo/AL. Segundo a PRF, houve intensa troca de tiros com os suspeitos que estavam com a carga, mas ninguém ficou ferido.Ainda de acordo com a polícia, a denúncia chegou através da Central de Informações, que recebeu uma ligação
                  da Empresa de Rastreamento informando que havia perdido o sinal de rastreamento de um dos seus veículos. Ao receberem a informação, as equipes se deslocaram para averiguação.Ao chegarem ao local, o caminhão estava com as portas abertas,
                  o motorista sendo mantido refém por um indivíduo armado e outros retirando a carga do veículo. Quando perceberem a chegada das viaturas, os assaltantes começaram a efetuar disparos de arma de fogo em direção aos policiais, que revidaram
                  a agressão. Após a troca de tiros, os assaltantes fugiram em direção a um matagal.O motorista do caminhão informou à polícia que foi rendido por três homens armados em um posto de combustível localizado às margens da BR-101, no município
                  de Messias/AL. Ele informou ainda que, na ocasião, havia outro veículo dando cobertura.A mercadoria que estava sendo transportada - cerca de 550 pneus - foi recuperada intacta. Além disso, um aparelho utilizado pelos assaltantes para
                  bloquear o sinal de rastreamento do veículo foi apreendido pelos policiais. O veículo recuperado e o aparelho apreendido, bem como a vítima, um senhor de 56 anos, foram encaminhados à Delegacia de Roubos e Furtos de veículos em Maceió.</h6>
              </div>
            </a>
            <div class="link-btn">
              <a href="#">saiba mais</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Rogério for the report this means to understand what you really need. Would you be able to edit the question with an image of how you are and how you would like it to be?

– hugocsl

2018/07/10 at 15:13
Yes, I’ll do a simulation.

– Rogério Pancini

2018/07/10 at 15:15
Now it’s a little clearer, just one more thing, which you mean by "a hole that doesn’t line up the other side." what that hole would be and what it should line up where?

– hugocsl

2018/07/10 at 15:27

1 answer

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-07-10T16:07:22+00:00

Rogério from what I understand is that when you put the smaller image is a soft space between the image and the box with the correct information? If that’s what I think this css below can help you.

But regardless you’ll have to think this structure through for it to work in a responsive way right. You could have used display:flex instead of putting display:table-cell that I believe is making things difficult...

The model I made was kind of taking the tag <figure> and putting in it a width in PX (I could only make it work like this to move as little as possible in your css) with the Overflow:hidden. I also put a transform:translateX(-25%) for you to control which part of the image you want to show.

     .news-section .slide-item.right-margin {
      margin-right: 13px;
    }
    
    .news-section .slide-item.column-margin {
      padding-top: 10px;
      padding-bottom: 40px;
    }
    
    .news-section .slide-item .image-box {
      position: relative;
      display: table-cell;
    }
    
    figure {
      margin: 0;
    }
    
    a {
      text-decoration: none;
      cursor: pointer;
      color: #2681c3;
    }
    
    .news-section .slide-item .image-box img {
      border-radius: 5px;
    }
    
    .news-section .slide-item .image-box:after {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      content: '';
      border-radius: 5px;
      /* background: rgba(0, 0, 0, 0.3); */
    }
    
    .news-section .slide-item .date-box {
      position: absolute;
      width: 60px;
      height: 60px;
      right: 30px;
      top: 40px;
      background: #2681c3;
      z-index: 9;
      border-radius: 5px;
    }
    
    .news-section .slide-item .date-box h5 {
      font-size: 27px;
      font-family: 'Larsseit-Bold';
      line-height: 20px;
      color: #ffffff;
      margin-top: 10px;
      text-transform: uppercase;
    }
    
    .news-section .slide-item .date-box h5:before {
      color: #2681c3;
      content: "\f0da";
      font-family: FontAwesome;
      position: absolute;
      right: -8px;
      top: 10px;
      transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      -webkit-transition: all 500ms ease;
      -ms-transition: all 500ms ease;
      -o-transition: all 500ms ease;
    }
    
    .news-section .slide-item .date-box h5 span {
      font-size: 15px;
      font-family: 'Larsseit-Thin';
      color: #ffffff;
    }
    
    .news-section .slide-item .inner-box {
      position: relative;
      display: table-cell;
      left: -20px;
      vertical-align: top;
      padding-top: 24px;
    }
    
    .news-section .slide-item .inner-box .info-outer {
      position: relative;
      /* padding: 30px 16px; */
      margin-right: -20px;
    }
    
    .corpo_blog {
      padding: 16px 16px 30px 16px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #e5e5e5;
    }
    
    .news-section .slide-item .inner-box .info-outer h5 {
      font-size: 20px;
      /* color: #2e2e2e; */
      letter-spacing: .5px;
      text-transform: uppercase;
      font-family: 'Larsseit-Bold';
      text-align: initial;
      display: -webkit-box;
      height: 44px;
      line-height: 22px;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .cor_titulos {
      color: #2e2e2e;
    }
    
    .news-section .inner-box .info-outer .link-btn {
      margin-top: 48px;
      text-align: right;
    }
    
    .news-section .inner-box .info-outer .link-btn a {
      line-height: 24px;
      text-transform: capitalize;
      transition: all 500ms ease;
      letter-spacing: .5px;
      font-family: 'Larsseit-Bold';
      font-size: 15px;
      text-align: right;
      color: #2681c3;
      text-transform: uppercase;
    }
    
    .news-section .inner-box .info-outer h6 {
      font-size: 17px;
      /* color: #2e2e2e; */
      margin-top: 10px;
      font-family: 'Larsseit-Light';
      text-align: initial;
      display: -webkit-box;
      height: 88px;
      line-height: 22px;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    figure {
      max-width: 325px;
      overflow: hidden;
    }
    figure a img {
      transform: translateX(-25%);
    }

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  
  <div class="news-section style-two">
      <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
          <div class="slide-item column-margin right-margin">
            <div class="image-box figure_box">
              <figure class="figure_blog">
                <a href="#"><img src="https://files.incrivel.club/files/news/part_40/405910/preview-13524560-650x341-98-1519527991.jpg" alt=""></a>
              </figure>
              <div class="date-box text-center">
                <h5>03<br><span>Jul</span></h5>
              </div>
            </div>
            <div class="inner-box">
              <div class="info-outer">
                <a href="#">
                  <div class="corpo_blog">
                    <h5 class="cor_titulos">Carga de pneus avaliada em cerca de R$ 500 mil é recuperada pela PRF/AL</h5>
                    <h6 class="cor_titulos">Um caminhão com carga avaliada em aproximadamente R$ 500 mil foi recuperado pela Polícia Rodoviária Federal (PRF/AL) na madrugada desta sexta-feira (29), nas proximidades do km 84 da BR-101, entrada da Empresa Britex Minerações, no município
                      de Rio Largo/AL. Segundo a PRF, houve intensa troca de tiros com os suspeitos que estavam com a carga, mas ninguém ficou ferido.Ainda de acordo com a polícia, a denúncia chegou através da Central de Informações, que recebeu uma ligação
                      da Empresa de Rastreamento informando que havia perdido o sinal de rastreamento de um dos seus veículos. Ao receberem a informação, as equipes se deslocaram para averiguação.Ao chegarem ao local, o caminhão estava com as portas abertas,
                      o motorista sendo mantido refém por um indivíduo armado e outros retirando a carga do veículo. Quando perceberem a chegada das viaturas, os assaltantes começaram a efetuar disparos de arma de fogo em direção aos policiais, que revidaram
                      a agressão. Após a troca de tiros, os assaltantes fugiram em direção a um matagal.O motorista do caminhão informou à polícia que foi rendido por três homens armados em um posto de combustível localizado às margens da BR-101, no município
                      de Messias/AL. Ele informou ainda que, na ocasião, havia outro veículo dando cobertura.A mercadoria que estava sendo transportada - cerca de 550 pneus - foi recuperada intacta. Além disso, um aparelho utilizado pelos assaltantes para
                      bloquear o sinal de rastreamento do veículo foi apreendido pelos policiais. O veículo recuperado e o aparelho apreendido, bem como a vítima, um senhor de 56 anos, foram encaminhados à Delegacia de Roubos e Furtos de veículos em Maceió.</h6>
                  </div>
                </a>
                <div class="link-btn">
                  <a href="#">saiba mais</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>