HTML sayfasında zoom out yapınca elementlerin yeri değişiyor

FurkaN80

Decapat
Katılım
22 Haziran 2019
Mesajlar
78
Yer
İstanbul
Hobi olarak yaptığım HTML sayfasında "zoom out" yapınca elementlerin yeri değişiyor. Bunun uzaklaştırınca da aynı kalmasını istiyorum, bu nasıl olur?
Kodlar:

Kod:
<!DOCTYPE html>

<html lang="tr">

<head>

  

<style type="text/css">

body{

background-image: url(ing/background.jpg);

-webkit-background-size: cover;

              -moz-background-size: cover;

              -o-background-size: cover;

              background-size: cover;

}





</style>

<style type="text/css">

h1{

    color: rgb(255, 255, 255);

    font-size: 100px;

    font-family: tahoma;

    font-weight: bold;

}



.image1{

        width: 200px;

        height: 300px;

        background:url("ing/gfit.jpeg") no-repeat;

        background-size: 100% auto;

        background-position: 50% 50%;

        transition: background-size  .2s;

        margin: 200px 0 0 400px;

      

}

.image1:hover{

        background-size: 70% auto;

}







.image2{

        width: 200px;

        height: 300px;

        background:url("ing/steamgiftcard.jpeg") no-repeat;

        background-size: 100% auto;

        background-position: 50% 50%;

        transition: background-size  .2s;

        margin: 0 0 0 400px;

      

}

.image2:hover{

        background-size: 70% auto;

}

</style>





    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>GameCodes | Kod Alın</title>

</head>

<body>

  <center><h1>BİR HEDİYE KARTI SEÇİN</h1></center>

<div class="image1"></div>

<div class="image2"></div>

</body>

</html>
 

Dosya Ekleri

  • normal.jpg
    normal.jpg
    85,6 KB · Görüntüleme: 150
  • uzaklaştırınca.jpg
    uzaklaştırınca.jpg
    67,9 KB · Görüntüleme: 132
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Technopat Haberler

Yeni konular

Geri
Yukarı