Texto relativo a imagem

Não entendi o resultado esperado, vc pode explicar melhor?

QUERO QUE O TEXTO FIQUE RELATIVO A BARRA INFERIOR, pq tipo, se eu adicionar uma imagem maior, o texto fica um mais baixo que o outro, quero padronizar isso.

image.jpg343×567 42.5 KB

Coloca isso no H1

position: relative;
bottom: 0;

Vai posicionar na parte inferior do componente pai

Ou então define um tamanho exato para todas a imagem

não foi.

Agora entendi melhor.

Pensei numa solução usando a propriedade display: flex e suas propriedades relacionadas.

Se este for um projeto sério, tem que ver qual a versão mínima dos navegadores que você quer suportar e se eles aceitam estas propriedades.

Se tiver como target navegadores modernos, acredito que não terá problemas. Segue minha proposta.

HTML base

<div class="container">
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x350">
        <h2 class="title">Contra Filé</h2>
    </div>
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x150">
        <h2 class="title">Cupim A</h2>
    </div>
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x450">
        <h2 class="title">Alcatra</h2>
    </div>
    <div class="box">
        <img class="photo" src="https://via.placeholder.com/350x275">
        <h2 class="title">Patinho</h2>
    </div>
</div>

O CSS

.container {
    background: red;
    max-width: 700px;
    margin: auto;
    display: flex;
}

.box {
    background: orange;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.photo {
    width: 100%;
    display: block;
}

.title {
    background: blue;
    text-align: center;
    margin: 0;
}

Coloquei cores pra ficar mais fácil identificar cada coisa, mas se vc tirá-las vai ter uma percepção melhor do que você precisa.

Segue o link do código no codepen: https://codepen.io/anon/pen/YJPPvm

Abaixo estão alguns links sobre esta propriedade.

• Basic concepts of flexbox (developer.mozilla.org)
• Controlling Ratios of Flex Items Along the Main Axis (developer.mozilla.org)
• A Complete Guide to Flexbox (css-tricks.com)

e quais são?
“Se tiver como target navegadores modernos, acredito que não terá problemas. Segue minha proposta.”

No meu exemplo usei três propriedades que estão presentes no Internet Explorer apenas a partir da versão 11, por exemplo.

Abaixo estão links para tabelas mostrando em quais navegadores cada propriedade que usei está disponível.

• display: flex
  https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility
• flex-direction
  https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Browser_compatibility
• justify-content
  https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Browser_compatibility

Você pode também usar o site caniuse.com para conhecer a compatibilidade dos recursos que deseja usar. https://caniuse.com/#feat=flexbox