Расположение изображений друг над другом и оставаясь отзывчивым - PullRequest
Новая
       2

Расположение изображений друг над другом и оставаясь отзывчивым

0 голосов
/ 16 мая 2019

Я борюсь за выполнение этой простой задачи. У меня есть логотип, который находится сверху, и я хочу добавить две иконки социальных сетей под этим логотипом. Я хочу, чтобы он правильно менял размер, когда кто-то открывает эту страницу на мобильном устройстве. Проблема, которая у меня есть:

1) Как сделать иконки социальных сетей посередине (под логотипом)

2) Как видите, я нашел код, который работает и масштабирует изображение логотипа, но как насчет социальных значков, они также будут масштабироваться? 

body { 
background: white;
}

div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

img.margin {
margin-right: 5em;
}

img.size {
width: 100px;
height: 100px;
}
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="shadow">
      <div>
        <img class="logo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/925cb179-def2-4e5c-9ad5-dd5d4b13a82c/d5n943h-18d11997-1817-4bcc-8369-2e859abce30b.png/v1/fill/w_1192,h_670,q_70,strp/random_new_wallpaper__1920x1080__by_joethewiltshire_d5n943h-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzkyNWNiMTc5LWRlZjItNGU1Yy05YWQ1LWRkNWQ0YjEzYTgyY1wvZDVuOTQzaC0xOGQxMTk5Ny0xODE3LTRiY2MtODM2OS0yZTg1OWFiY2UzMGIucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.NjrkHarfMG82i4VGLEVTluc6bMFkud-9KeF8vOJbqlE" />
      </div>
      <div class="social">
        <img class="margin size" src="https://www.facebook.com/images/fb_icon_325x325.png" /><img class="size"src="https://www.facebook.com/images/fb_icon_325x325.png" />
      </div>
    </div>
  </body>
</html>

Социальные изображения расположены не посередине и не масштабируются при изменении размера окна.

Пожалуйста, помогите

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Я предлагаю использовать css flex-box. используя их, вы можете легко упорядочить, заказать и подобрать предметы. https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

Для динамического масштабирования я бы предложил использовать единицы измерения css vw и vh. Эти единицы относятся к вашему разрешению экрана, а не к родительским объектам, таким как %. 

body { 
  background: white;
}

div.shadow div {
  display:flex;
  justify-content: center;
}

div.shadow div.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: auto;
}

div.shadow div.social img {
  margin: 5px;
}

img.logo {
    width:40vw;
    height: auto;
}

img.size {
  width: 10vw;
  height: 10vw;
}
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="shadow">
      <div class="logo">
        <img class="logo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/925cb179-def2-4e5c-9ad5-dd5d4b13a82c/d5n943h-18d11997-1817-4bcc-8369-2e859abce30b.png/v1/fill/w_1192,h_670,q_70,strp/random_new_wallpaper__1920x1080__by_joethewiltshire_d5n943h-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzkyNWNiMTc5LWRlZjItNGU1Yy05YWQ1LWRkNWQ0YjEzYTgyY1wvZDVuOTQzaC0xOGQxMTk5Ny0xODE3LTRiY2MtODM2OS0yZTg1OWFiY2UzMGIucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.NjrkHarfMG82i4VGLEVTluc6bMFkud-9KeF8vOJbqlE" />
      </div>
      <div class="social">
        <img class="margin size" src="https://www.facebook.com/images/fb_icon_325x325.png" />
        <img class="size"src="https://www.facebook.com/images/fb_icon_325x325.png" />
      </div>
    </div>
  </body>
</html>

В качестве альтернативы, вы можете использовать transform для центрирования почти всего.

0 голосов
/ 16 мая 2019 

.shadow {
    width: 100%;
    height: 100%;
    
    }
    .logo {
        width: 15%;
    }
    
    .social{
        width: 100%;
    }
    .size {
    width: 100px;
    height: 100px;
    }

    @media (max-width: 600px){
        .logo {
            width: 60%;
        }
    }
    
        <div class="shadow">
            <img class="logo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/925cb179-def2-4e5c-9ad5-dd5d4b13a82c/d5n943h-18d11997-1817-4bcc-8369-2e859abce30b.png/v1/fill/w_1192,h_670,q_70,strp/random_new_wallpaper__1920x1080__by_joethewiltshire_d5n943h-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzkyNWNiMTc5LWRlZjItNGU1Yy05YWQ1LWRkNWQ0YjEzYTgyY1wvZDVuOTQzaC0xOGQxMTk5Ny0xODE3LTRiY2MtODM2OS0yZTg1OWFiY2UzMGIucG5nIiwid2lkdGgiOiI8PTE5MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.NjrkHarfMG82i4VGLEVTluc6bMFkud-9KeF8vOJbqlE" />
            
            <div class="social">
                <img class="size" src="https://www.facebook.com/images/fb_icon_325x325.png" />
                <img class="size" src="https://www.facebook.com/images/fb_icon_325x325.png" />
            </div>
        </div>
...