Imagem dos projetos não responsiva com o thumbnail | Bootstrap: criação de uma single-page responsiva

Oi gente, tudo bem? Já estava bem pra frente do curso quando percebi que minhas imagens da sessão Nossos Projetos não estavam responsivas com a caixa do thumbnail. Apenas a primeira estava funcionando, da Casa Castelo, já as outras quando clicava pra sair da ferramenta do desenvolvedor não ficavam adequadas ao thumbnail.

Segue meu código:

<section id="nossos-projetos" class="container">

    <h1>Nossos Projetos</h1>

    <figure class="thumbnail">
        <img src="bootstrap-boas-praticas-no-front-end-f694bc9dd5b267a71124f81eaabe68b1df3fa926/assets/img/castelo.jpg"
            alt="Foto da Casa Castelo">
        <figcaption class="caption">
            <h3>Casa Castelo</h3>
            <p>A Casa Castelo é o último lançamento da TopCasaFina feita para um monge.</p>
        </figcaption>
    </figure>

    <figure class="thumbnail">
        <img src="bootstrap-boas-praticas-no-front-end-f694bc9dd5b267a71124f81eaabe68b1df3fa926/assets/img/projetos/casa-lago.png"
            alt="Foto da Casa Lago">
        <figcaption class="caption">
            <h3>Casa Lago</h3>
            <p>A Casa Lago foi o lar de inúmeras pessoas que conheciam o presidente da época.</p>
        </figcaption>
    </figure>

    <figure class="thumbnail">
        <img src="bootstrap-boas-praticas-no-front-end-f694bc9dd5b267a71124f81eaabe68b1df3fa926/assets/img/projetos/mercado-marapira.png"
            alt="Foto do Mercado Marapira">
        <figcaption class="caption">
            <h3>Mercado Marapira</h3>
            <p>O Mercado Marapira foi projetado nos mínimos detalhes na arquitetura baseada em frutas.</p>
        </figcaption>
    </figure>

    <figure class="thumbnail">
        <img src="bootstrap-boas-praticas-no-front-end-f694bc9dd5b267a71124f81eaabe68b1df3fa926/assets/img/projetos/palacio-dionisio.png"
            alt="Palácio Dionísio">
        <figcaption class="caption">
            <h3>Palácio Dionísio</h3>
            <p>O Palácio Dionísio foi eleito pela revista "Grandes Palácios" como o palácio mais lindo do mundo.
            </p>
        </figcaption>
    </figure>

    <figure class="thumbnail">
        <img src="bootstrap-boas-praticas-no-front-end-f694bc9dd5b267a71124f81eaabe68b1df3fa926/assets/img/projetos/residencia-ludi.png"
            alt="Foto da Residência Ludi">
        <figcaption class="caption">
            <h3>Residência Ludi</h3>
            <p>A Residência Ludi foi projetada para ser a mais bela casa de São Paulo pela revista Housing.</p>
        </figcaption>
    </figure>
</section>

Olá Gabrila, tudo bem? Você pode criar um container para sua imagem e fazer ela pegar 100% do espaço disponivel deste container.

Veja abaixo o exemplo de código:

    <figure>
        <div class="wrapper">
            <img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
        </div>
        <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione vero, doloremque ipsam ullam veniam beatae. Vero placeat iusto deserunt? Error labore fuga nostrum ab provident numquam asperiores distinctio nihil veniam?</figcaption>
    </figure>

        figure {
            max-width: 30vw;
            margin: 0 auto;
        }

        .wrapper {
            width: 100%;
            max-height: 200px;
        }

        .wrapper img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
        }

Fazendo assim, sua imagem vai se adaptar bem, e você também pode adicionar o tamanho minimo que ela deveria ter para não ficar tão pequena.

Mergulhe em programação