Изображения в меньшем браузере

Question

Изображения в меньшем браузере

0

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

Если посмотреть на этот сайт в качестве примера, размер изображения не изменяется при изменении размера экрана, изменяется только положение изображения. Как мне это сделать?

Текущий CSS

position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;

CodeGuru 03 окт. 2013, в 17:11

Источник

0

Осмотрите элемент вашего друга
allen213 03 окт. 2013, в 15:09
0

Примечание: будьте осторожны с термином «сжатие». В мире Интернета это обычно означает «уменьшение размера (в байтах) элемента без потери его качества, если это возможно».
Bram Vanroy 03 окт. 2013, в 15:25

Теги:

html

css

css3

image

4 ответа

Ещё вопросы

Примечание: будьте осторожны с термином «сжатие». В мире Интернета это обычно означает «уменьшение размера (в байтах) элемента без потери его качества, если это возможно».

Ennui · Answer 1 · 2013-10-03T14-28-00.000Z

Если вы хотите изменить размеры изображений при смене окна, просто измените height: 500px на height: auto в CSS, который вы разместили. Это заставит изображения сохранять исходное соотношение по мере изменения width. То, как работает ваш код прямо сейчас, заключается в том, что он изменяет размер изображения по горизонтали, поэтому он никогда не шире его контейнера, но имеет фиксированную высоту, которая испортит соотношение сторон, когда оно начинает уменьшаться горизонтально.

Если вы хотите, чтобы изображение оставалось одного и того же размера и просто перемещалось, когда окно браузера сокращается, вам необходимо применить их как background-image. Попробуйте этот CSS-код в контейнере div, который вы хотите применить к фону изображения:

#container {
    background: url(path/to/image.jpg) no-repeat center top;
}

nilobarp · Answer 2 · 2013-10-03T13-55-00.000Z

Здесь ответ: Отзывчивые изображения с помощью CSS

CSS:

max-width:100% !important;
height:auto;
display:block;

Попробовал это, хм, я действительно не хочу, чтобы изображение двигалось: \ Спасибо, XD

Halcyon · Answer 3 · 2013-10-03T13-27-00.000Z

Используйте @media, например:

@media screen and (max-width: 1280px) and (max-height: 1024px) {
    .splash {
        background-image: url('../img/splash-1280.jpg');
    }
}
@media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
    .splash {
        background-image: url('../img/splash-1920.jpg');
    }
}

В их CSS:

@media (max-width: 1280px)
    [id="get-started"] {
    background-size: auto;
    background-position: center top;
}

Что переопределяет:

background-position: center center;
background-size: 100%;

Спасибо, я учту это, но хм, я все еще пытаюсь задаться вопросом, как это делает другой веб-сайт, как будто изображения не меняются вообще, только то, что вид изображения меньше
Единственное различие, которое я вижу, у меня есть тег img, они не делают. это влияет?
Они используют фоновый размер, чтобы растянуть, так что да.

idmean · Answer 4 · 2013-10-03T12-20-00.000Z

На сайте, который вы связали, они применяют этот CSS

display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;

на div. Но есть большие инструменты инспектора, которые могут проверить это для вас, поэтому не спрашивайте, есть ли у вас "живой" пример.

Вы должны особенно взглянуть на свойства фона.

Я думаю, что суть этого в размере фона: 100%