Possuo uma galeria de imagens da seguinte forma: https://imgur.com/a/1apHMge
Porém se perceberem a imagem "CastanhaF" esta virada para direita, ela foi postada reta no servidor porem está virando sozinha ao executar a página.
Estou usando o seguinte código HTML:
<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>
Código CSS:
* {
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%;
}
}
No Html da referida imagem eu tentei colocar a propriedade transform: rotate(90deg)
aparentemente deu certo, porem como eu redimensiono a tela para uma tela maior a imagem começa a fica em cima de outra, como posso resolver isso ?