1

Tenho a seguinte estrutra html:

<div class="col-8 ml-2 bg-secondary">
        <h3 class="">Ultimas Notícias</h3>
        <div class="card">
            <div class="row">
                <div class="col-3 bg-dark">
                    <img src="http://via.placeholder.com/900x500" class="w-100">
                </div>
                <div class="col-9">
                    <div class="card-block">
                        <div class="card-title font-weight-bold mb-0">
                            Lorem ipsum dolor sit amet
                        </div>
                        <div class="card-text ">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsum minima minus
                                modi nobis quisquam tempora temporibus? Ad aspernatur dolorum maxime nesciunt omnis
                                reprehenderit suscipit.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Resultando em:

inserir a descrição da imagem aqui

Quero fazer com que a imagem ocupe todo espaço da coluna, que seria a parte preta escura (porem a parte preta escura deve alinhar com o Ultimas noticias e não sair para fora do card)

1
  • Fala Igor editei a resposta com a imagem centralizando no Pai
    – hugocsl
    19/03/2018 às 18:48

4 Respostas 4

2

Na realidade o col-3 do bootstrap poe essa margem.

Neste caso você teria que remover ou criar uma classe para tirar (forçar) a remoção do margin (ou padding).

Use o inspetor do seu navegador para saber qual a margem ou padding que está no elemento com col-3.

Ou use alguma classe nativa do bootstrap para remover. Talvez já tenha algo pronto que zere a propriedade em questão.

1
  • 1
    consegui remover a borda, a questão é que se eu colcoar uma imagem maior que o tamanho ele ultrapassa, quero que ele fique dentro 19/03/2018 às 17:20
1

Eu sugeria usar a imagem como background, assim ela iria ocupar toda a div e não perderia o aspect ratio (proporção), se ajustando automaticamente à dimensão da div e adicionar o estilo inline direto na tag.

Basta criar e adicionar uma classe na div:

.imagem{
   background-size: cover !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="col-8 ml-2 bg-secondary">
     <h3 class="">Ultimas Notícias</h3>
     <div class="card">
         <div class="row">
             <div class="col-3 bg-dark imagem" style="background:url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg) center;">
             </div>
             <div class="col-9">
                 <div class="card-block">
                     <div class="card-title font-weight-bold mb-0">
                         Lorem ipsum dolor sit amet
                     </div>
                     <div class="card-text ">
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsum minima minus
                             modi nobis quisquam tempora temporibus? Ad aspernatur dolorum maxime nesciunt omnis
                             reprehenderit suscipit.
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>

4
  • mas irei colocar as imagens dinamicamente com php, é possivel alterar ? 19/03/2018 às 18:45
  • Vou editar a resposta...
    – Sam
    19/03/2018 às 18:46
  • Pronto. Você pode colocar o backgound inline direto na div.
    – Sam
    19/03/2018 às 18:48
  • Essa opção realmente ficou melhor, a imagem se encaixa dentro da div. obrigado 19/03/2018 às 19:26
1

Acredito que você consiga resolver o seu problema através da utilização da classe card-img presente no Bootstrap, e adicionando em seu css o seguinte código:

.card-img {
  width: 100%;
  height: auto;
}

É interessante ler a documentação do Bootstrap 4 sobre Cards também. Manda um feedback se funcionou ou não, e podemos olhar outras soluções. Sugiro postar o CSS do seu código também para que possamos ver o que foi feito.

1

Jovem vc pode usar overflow:hidden na div assim se a imagem for maior que o Pai ela vai "cortar" e não ficar interferindo nos demais elementos.

Veja o Exemplo. Aproveitei e retirei o padding default que o Bootstrap coloca nas divs

OBS1: Repare que eu coloquei na imagem os tamanho de height: 100% e width: 120% para vc ver que mesmo sendo maior ela não fica para fora da div

OBS2: Para centralizar a imagem entre transform:translate() para centralizar a imagem dentro da div

.clip {
    overflow: hidden;
    padding: 0;
    position: relative;
}
.clip img {
    height: 120%;
    width: 120% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

<div class="col-8 ml-2 bg-secondary">
    <h3 class="">Ultimas Notícias</h3>
    <div class="card">
        <div class="row">
            <div class="col-3 bg-dark clip">
                <img src="http://via.placeholder.com/900x500" class="w-100">
            </div>
            <div class="col-9">
                <div class="card-block">
                    <div class="card-title font-weight-bold mb-0">
                        Lorem ipsum dolor sit amet
                    </div>
                    <div class="card-text ">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsum minima minus
                            modi nobis quisquam tempora temporibus? Ad aspernatur dolorum maxime nesciunt omnis
                            reprehenderit suscipit.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Se precisar coloque regras de resposividade dentro dos @media

1
  • ocultei como eu centralizo ela ? 19/03/2018 às 17:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .