Scroll uygulanmış resmin mobilde yüksekliğini düşürme

02-11-2020, 06:51:06

tuyo

Kimlik doğrulama veya yönetimden onay bekliyor.

Mobilde resimin genişiliği azalıyor sorun yok, fakat scroll yükseklik (height: 450px; )oranı düşmüyor, nasıl yapabilirim?

<div style="height: 450px; overflow-x: hidden; overflow-y: scroll;">

<img class="wp-image-4331 size-full aligncenter" src="resim.jpg" alt="" width="699" height="1990" />

</div>

02-11-2020, 06:58:59

#2

ACEY

max-height: 450px; // olarak deneyin.

02-11-2020, 07:03:16

#3

tuyo

Kurumsal Üye

yapmıştım olmadı malesef..

04-11-2020, 07:33:57

#4

ACEY

Cevabınızı yeni gördüm.

@media only screen and (max-width: 500px) {
.size-full {height: 250px }
}

gibi bir çözüm çıkabilir.
size-full yerine div elemanınıza class atarsanız daha sağlıklı olur.

max-height: 450px; bunu birde !important ile deneyebilirsiniz.

16-11-2020, 01:27:51

#5

tuyo

Kurumsal Üye

Scorpion2763 adlı üyeden alıntı: mesajı görüntüle

Cevabınızı yeni gördüm.

@media only screen and (max-width: 500px) {
.size-full {height: 250px }
}

gibi bir çözüm çıkabilir.
size-full yerine div elemanınıza class atarsanız daha sağlıklı olur.

max-height: 450px; bunu birde !important ile deneyebilirsiniz.

Bu şekilde yaptım kendi telefonumda görüntüde sorun yok, fakat farklı çözünürlük ve telefonlarda test ettim (http://responsivetesttool.com/) görüntü bozuluyor.

<div class="webisler"><img class="img-responsive aligncenter" src="https://tuyograf.com/medya/2020/11/formex-anasayfa-699-1.jpg" width="699" height="1990" /></div>

Sayfa yapıcı mobil padding:

padding-top: 24 px;
padding-right: 46 px;
padding-bottom: 0 px;
padding-left: 45 px;

.webisler {  
display:block;
margin: auto;
max-width:717px;
max-height:449px;
overflow:auto;         }          
@media only screen and (max-width:991px) {    .webisler {      
display:block;            
max-width:252px !important;      
max-height:157px !important;    
 margin: auto;      
overflow:auto;            
margin-bottom: 45px;      
   }         }