Есть ли способ сделать изображение в пропорции?

Привет, я пытаюсь найти что-то из html и css, чтобы увидеть, что работает, а что нет, и мне было интересно, можно ли сделать изображение в центре экрана и всегда приспосабливаться к размеру экран. Например, изображение, которое, когда я смотрю на него на экране 1920х1080, имеет размер 192 * 108, и когда я смотрю на него на экране 1600 * 900, он становится 160 * 90, а центр изображения остается посередине.Есть ли способ сделать изображение в пропорции?

PS: Не имеет значения, что разрешение изображения изменяется, хотя изображение иногда выглядит ужасно.

источник

2014-01-14 user3052776

Вам также нужно максимизировать высоту изображения, когда высота превышает его ширину? –

ум, показывающий некоторые css/html вашего ?? – NoobEditor

Если вы нашли ответ, отметьте его? – Marriott81

Чтобы адаптироваться к размеру экрана, поместите изображение в контейнер, а затем сделать:

img{ 
    width:100%; 
    height:auto; /*maintains aspect ratio */ 
    }

Теперь изображение будет иметь размер контейнера !!

Для выравнивания изображения в центре вашего DIV ... сделать:

div{ 
width:80%; 
margin:0 auto; /*align div in center first*/ 
text-align:center /*center content*/ 
}

источник

2014-01-14 16:34:08 NoobEditor

Да, но он говорит, что хочет сохранить центр изображения посередине. Это уменьшит масштаб изображения. – donnywals

Это будет работать, только если ему нужно оптимизировать ширину. Но если ему также нужно оптимизировать высоту (в зависимости от экрана и соотношения изображений), это сложнее. –

Но разве нельзя ли адаптировать div тогда к размеру экрана? И поместите его в соответствии с центром дива. – user3052776

Вы не можете сделать это только с помощью тега изображения. Вы можете поместить изображение, которое вы используете в качестве фонового изображения, а затем установите размер для покрытия. В основном это:

body { 
    background-image: url('url/to/your/image.jpeg'); 
    background-size: cover; 
    background-position: center center; 
}

источник

2014-01-14 16:38:30 donnywals

хотя я dint downvote .... но ур решение для фона ... не изображения в div !! – NoobEditor

взяты из

Use CSS to make an image scale up and down

img { 
    width:100%; 
}

Однако, это можно легко сделать изображение похожим на общую хрень. Более безопасным способом может быть:

img { 
    max-width:100%; 
}

В любом случае размер изображения будет меняться при изменении размера браузера. Тем не менее, второй не будет растягивать изображение за его естественный размер, поэтому он не выглядит деформированным.

источник

2014-01-14 16:45:02 Marriott81

Есть ли способ сделать изображение в пропорции?

ответ

Смежные вопросы