Изображение моего героя увеличивается, когда я масштабирую ширину браузера - PullRequest
Новая
       0

Изображение моего героя увеличивается, когда я масштабирую ширину браузера

0 голосов
/ 02 марта 2020

Я не могу заставить фоновое изображение моего героя перестать увеличиваться при масштабировании браузера. Я хочу, чтобы изображение на настольном компьютере / ноутбуке выглядело так же, как на мобильном устройстве. Я пытался использовать подгонку объекта, но это, кажется, не имеет никакого значения, я также пытался установить stati c ширину и высоту. Может кто-нибудь помочь или указать мне в правильном направлении.

Html

 <body>
    <header id="showcase" class="grid">
        <div class="bg-image"></div>


    </header>


    </body>

CSS

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 1.1em;
  line-height: 1.5;
  text-align: center;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 1em 0;
}

p {
  margin: 0;
  padding: 1em 0;
}

#showcase {
    min-height: 450px;
}

.bg-image {
    position: relative;
    background-image: url(girlsmall.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 450px;

}


/* small tablet styles */
@media screen and (min-width: 620px){


}

/* large tablets and laptops */
@media screen and (min-width: 960px){
    body{
        font-size: 18px;
    }


}

/* desktop styles */ 
@media screen and (min-width: 1200px){

     body{
        font-size: 20px;
    }
}

enter image description here

enter image description here

1 Ответ

0 голосов
/ 02 марта 2020

это то, что вы хотите? я не установил изображение в качестве фона, а просто использовал свойство z-index. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style>
            html, body
            {
                height: 100%;
                margin: 0px;
            }

            #a
            {
                position: relative;
                height: 100%;
                margin-left: auto;
                margin-right: auto;
                z-index: -1;
                left: 50%;
                top: 50%;
                transform: translateY(-50%) translateX(-50%);
            }
        </style>
    </head>
    <body>
        <img id="a" src="girlsmall.jpg" alt="">
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...