Obtendo a imagem para esticar um div

StackOverflow https://stackoverflow.com/questions/41198

  •  09-06-2019
  •  | 
  •  

Pergunta

Como posso fazer com que uma imagem estique a altura de um DIV aula?

Atualmente está assim:

Porém, gostaria que o DIV fosse esticado para que a imagem se ajustasse corretamente, mas não quero redimensionar a imagem.

Aqui está o CSS para o DIV (a caixa cinza):

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}

O CSS que está sendo aplicado na imagem:

.product{
    display: inline;
    float: left;
}

Então, como posso consertar isso?

Foi útil?

Solução

Adicionar overflow:auto; para .product1

Outras dicas

Na marcação após a imagem, insira algo como <div style="clear:left"/>.Um pouco confuso, mas é a maneira mais fácil que encontrei.

E enquanto você faz isso, coloque um pouco de margem na imagem para que o texto não bata nela.

Supondo que @John Millikin esteja correto, o código

.product + * { clear: left; }

seria suficiente fazer a mesma coisa sem forçá-lo a ajustar manualmente o código após o div.

Um truque que você pode usar é definir o <div>propriedade overflow para oculta.Isso força os navegadores a calcular o tamanho físico da caixa e corrige o estranho problema de sobreposição com a imagem flutuante.Isso evitará que você adicione qualquer marcação HTML extra.

Veja como a classe deve ficar:

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
    overflow: hidden;
}

Isto parece um trabalho para clearfix para mim ...

Experimente o seguinte:

.Strech
{
    background:url(image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;

    width:500px;
    height:500px;
}

display:inline  
float:left

é seu problema

Flutuar faz com que a largura dos pais não seja esticada pela criança, tente colocar a imagem sem o flutuador.Se você tirar o flutuador, ele deverá dar o efeito desejado.
Outra abordagem seria certificar-se de que você está limpando seus carros alegóricos no final do elemento pai para que eles não aumentem o escopo.

Atualizar: Depois de visualizar seu link, seu problema de altura conforme exibido é porque os carros alegóricos não estão sendo liberados.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top