Как заставить изображение растягиваться, чтобы оно автоматически помещалось на экране в CSS3?

0

Я пытаюсь растянуть изображение VERTICAL, автоматически подгоняя верх и низ любого экрана. Как это сделать в CSS3?

Вот что я имею, если бы это помогло:

.logo{
   height: 700px;
   width: 150px;
}

Это также не фоновое изображение.

  • 0
    если это не фоновое изображение и не может быть сделано, то вам может не повезти.
  • 0
    ширина 100% или высота 100% это? Если я понимаю ваш вопрос.
Показать ещё 4 комментария
Теги:

3 ответа

1 
.logo{
  height: 100vh;
}

Вы также можете задать ширину для auto сохранения пропорций...

(ссылка)

Поделиться
  • 0
    jsfiddle.net/6J8nS
  • 0
    безусловно, самый правильный ответ! +1
Показать ещё 3 комментария
1

Лучшим способом было бы сделать его фоном div, который имеет высоту и ширину, установленную на 100%, а затем дать ему специальную настройку фона, чтобы она не искажалась. Возможно, это то, что вам нужно.

/*
This is needed for 100% height of the div as the percentage refers to the parent element.
*/
html, body {
    height: 100%;
}

/*
This is the actual image
*/
.image {
    background: #000 url(https://www.google.com/images/srpr/logo11w.png) repeat-x;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
}

<body>
    <div class="image"></div>
</body>
Поделиться
0

Попробуй это:

<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        img {
            height: 100%;
            width: auto;
        }
    </style>
</head>
<body>
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
</body>
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню