Image does not rotate

Question

I have an image gallery as follows: https://imgur.com/a/1apHMge

But if you notice the image "Castanhaf" this turned to the right, it was posted straight on the server but is turning alone when running the page.

I am using the following HTML code:

<div class="linha">
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Artesanato com cipó.jpg" style="width:100%; height:300px; " alt="Artesanato com cipó">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Artesanato com fibra de bananeira - Associação Mulheres de Fibra_editado.jpg" style="width:100%; height:300px;" alt="Artesanato com fibra de bananeira - Associação Mulheres de Fibra">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha de cumbaru.jpg" style="width:100%; height:300px;" alt="Castanha de cumbaru">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Oleo de copaíba_editado.jpg" style="width:100%; height:300px;" alt="Óleo de copaíba">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Mel de abelha nativa sem ferrão com Castanha do Brasil.jpg" style="width:100%; height:300px;" alt="Mel de abelha nativa sem ferrão com Castanha do Brasil">
        <img src="~/Areas/ModuloPublico/Content/img/Home/minicolar com sementes_editada.jpg" style="width:100%; height:916px;" alt="Minicolar com Sementes">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Cesto de buriti.jpg" style="width:100%; height:300px;" alt="Cesto de buriti">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Colar produzido com açaí.jpg" style="width:100%; height:300px;" alt="Colar produzido com açaí">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Guaraná em formato de bastão.jpg" style="width:100%; height:300px;" alt="Guaraná em formato de bastão">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Farinha de babaçu aberta.jpg" style="width:100%; height:300px;" alt="Farinha de babaçu aberta">
    </div>
    <div class="coluna">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Pitomba.jpg" style="width:100%; height:300px;" alt="Pitomba">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Biscoito de babaçu.jpg" style="width:100%; height:300px;" alt="Biscoito de babaçu">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha do Brasil coberta com chocolate.jpg" style="width:100%; height:300px; transform: rotate(90deg)" alt="Castanha do Brasil coberta com chocolate">
        <img src="~/Areas/ModuloPublico/Content/img/Home/Castanha do Brasil in Natura.jpg" style="width:100%; height:300px;" alt="Castanha do Brasil in Natura">
    </div>
</div>

CSS code:

* {
    box-sizing: border-box;
}

.linha {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.coluna {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .coluna img {
        margin-top: 8px;
        vertical-align: middle;
    }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .coluna {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .coluna {
        flex: 100%;
        max-width: 100%;
    }
}

In the Html of said image I tried to put the property transform: rotate(90deg) apparently worked, however as I resize the screen to a larger screen the image starts to get on top of another, how can I solve this ?

Answer 1

Set your CSS to:

#tamanho{
    height: 100%;
    width: 100%;
}

and its img tag with the id="tamanho":

<img id="tamanho" src="https://via.placeholder.com/300" style="width:100%; height:300px;" alt="Castanha do Brasil coberta com chocolate">