Görüntüler CSS ile yeniden ölçeklenmiyor

Yeniden boyutlandırmanız gereken üç .svg resmim var. Bazı nedenlerden dolayı, ekranın son derece küçük olması dışında yeniden boyutlandırılmazlar.

html:

<div class='au-images'>
    <div class='computer'>
        


</div> <div class='tablet'>


</div> <div class='phone'>


</div>

I am also using scroll-reveal, which explains the 'data-sr' tag.

My CSS:

.computer,.tablet, .phone {
max-width: 33%;
display: inline-block;
padding: 0em 2.5em;
}

.computer img, .tablet img, .phone img {
    max-width: 100%;
    height: auto;
}

Can someone explain to me why my images don't resize?

0
Ne sonuç bekliyorsunuz? Üç görüntünüzün nasıl yerleştirilmesini istersiniz? Sadece tam ekran genişliğinde olan ve görüntüleri içeren bir satır mı istiyorsunuz?
katma yazar Tolokoban, kaynak
Ne sonuç bekliyorsunuz? Üç görüntünüzün nasıl yerleştirilmesini istersiniz? Sadece tam ekran genişliğinde olan ve görüntüleri içeren bir satır mı istiyorsunuz?
katma yazar Tolokoban, kaynak
Her biri bir görüntü içeren üç divs var. Görüntülerin yan yana yatay olarak hizalanmasını ve pencere boyutu küçüldüğünde küçülmesini istiyorum. Şu anda .png ve media sorgularını kullanan bir sistemim var, ancak çok garip görünüyor ve her durumda işe yaramıyor.
katma yazar Spyron10, kaynak
Her biri bir görüntü içeren üç divs var. Görüntülerin yan yana yatay olarak hizalanmasını ve pencere boyutu küçüldüğünde küçülmesini istiyorum. Şu anda .png ve media sorgularını kullanan bir sistemim var, ancak çok garip görünüyor ve her durumda işe yaramıyor.
katma yazar Spyron10, kaynak
Her biri bir görüntü içeren üç divs var. Görüntülerin yan yana yatay olarak hizalanmasını ve pencere boyutu küçüldüğünde küçülmesini istiyorum. Şu anda .png ve media sorgularını kullanan bir sistemim var, ancak çok garip görünüyor ve her durumda işe yaramıyor.
katma yazar Spyron10, kaynak

6 cevap

Sorun, görüntülerin üst öğelerinde genişlik ayarlamamış olmanızdır. CSS, maksimum genişliğin maksimum genişliğini hesaplayamaz, bu nedenle bildiği tek genişliğin maksimum genişliğini, yani gövdeyi kullanır.

Your code in a fiddle (modified to show some actual images)

Bu nedenle çözüm, ebeveyn divs'e maksimum genişlik yerine genişlik vermektir. Dolgu kullandığından beri, onu da dahil etmek için kutu boyutunu değiştirdim.

box-sizing: border-box;
width: 30%;

Updated code in a fiddle.

Genişliğin% 30'a düşürüldüğünü lütfen unutmayın, çünkü divlerin aralarında boşluklar var; % 33 ile toplam genişlik% 99 artı pencereyi aşabilecek bu iki boşluğun genişliği olacaktır.
Bunu istemiyorsanız, iç div'ler arasındaki tüm boşlukları kaldırın.

Şimdi% 33,33'lük genişlikleri kullanarak daha da güncellenmiş keman

1
katma

Sorun, görüntülerin üst öğelerinde genişlik ayarlamamış olmanızdır. CSS, maksimum genişliğin maksimum genişliğini hesaplayamaz, bu nedenle bildiği tek genişliğin maksimum genişliğini, yani gövdeyi kullanır.

Your code in a fiddle (modified to show some actual images)

Bu nedenle çözüm, ebeveyn divs'e maksimum genişlik yerine genişlik vermektir. Dolgu kullandığından beri, onu da dahil etmek için kutu boyutunu değiştirdim.

box-sizing: border-box;
width: 30%;

Updated code in a fiddle.

Genişliğin% 30'a düşürüldüğünü lütfen unutmayın, çünkü divlerin aralarında boşluklar var; % 33 ile toplam genişlik% 99 artı pencereyi aşabilecek bu iki boşluğun genişliği olacaktır.
Bunu istemiyorsanız, iç div'ler arasındaki tüm boşlukları kaldırın.

Şimdi% 33,33'lük genişlikleri kullanarak daha da güncellenmiş keman

1
katma

Sorun, görüntülerin üst öğelerinde genişlik ayarlamamış olmanızdır. CSS, maksimum genişliğin maksimum genişliğini hesaplayamaz, bu nedenle bildiği tek genişliğin maksimum genişliğini, yani gövdeyi kullanır.

Your code in a fiddle (modified to show some actual images)

Bu nedenle çözüm, ebeveyn divs'e maksimum genişlik yerine genişlik vermektir. Dolgu kullandığından beri, onu da dahil etmek için kutu boyutunu değiştirdim.

box-sizing: border-box;
width: 30%;

Updated code in a fiddle.

Genişliğin% 30'a düşürüldüğünü lütfen unutmayın, çünkü divlerin aralarında boşluklar var; % 33 ile toplam genişlik% 99 artı pencereyi aşabilecek bu iki boşluğun genişliği olacaktır.
Bunu istemiyorsanız, iç div'ler arasındaki tüm boşlukları kaldırın.

Şimdi% 33,33'lük genişlikleri kullanarak daha da güncellenmiş keman

1
katma

You can try to use the width unit vw. This unit is the viewport width expressed in percent. That is 100vw is the full width of your device. Take a look at this example: http://jsfiddle.net/v929q8mn/1/

div.blablabla img {
    display: inline-block;
    margin: 0;
    width: 30vw;
}

çoğu tarayıcıda desteklenir.

0
katma

You can try to use the width unit vw. This unit is the viewport width expressed in percent. That is 100vw is the full width of your device. Take a look at this example: http://jsfiddle.net/v929q8mn/1/

div.blablabla img {
    display: inline-block;
    margin: 0;
    width: 30vw;
}

çoğu tarayıcıda desteklenir.

0
katma

You can try to use the width unit vw. This unit is the viewport width expressed in percent. That is 100vw is the full width of your device. Take a look at this example: http://jsfiddle.net/v929q8mn/1/

div.blablabla img {
    display: inline-block;
    margin: 0;
    width: 30vw;
}

çoğu tarayıcıda desteklenir.

0
katma