Css сохранение пропорций блока при масштабировании

Сохранение пропорций Div при масштабировании

Есть несколько div блоков (один под другим). Верхний Div блок содержит картинку, ширина — 100%, высота 600px.

Необходимо, чтобы при изменении масштаба (например, при нажатии на CTRL + «+» или CTRL + «-«) размер верхнего div блока, где картинка, сохранялся.

Прикрепил картинку, чтобы было более понятно.

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

Сохранение пропорций при масштабировании страницы
Как сохранить пропорции всех блоков сайта при масштабировании страницы? Например как на сайте.

Сдвиг div при масштабировании
Имеется страничка, на которой есть картинка с полями ввода, на эти поля ввода надо подогнать input.

Разъезжаются блоки div при масштабировании
Привет, помогите разобраться почему разъезжаются блоки при увеличении масштаба страницы или.

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

Сообщение было отмечено mrtoxas как решение

Решение

1. Обертке задаем относительное позиционирование, а высоту блока задаем при помощи padding-top в процентах, тем самым, сохраняя пропорции блока при уменьшении масштаба.
2. Изображению задаем 100% ширины, абсолютное позиционирование, прижимаем к левому и верхнему краю.
В итоге, у вас должен получиться такой код:

1 2 3 4 5 6 7 8 9 10 11 12

.img-wrapper{ width:100%; padding-top:40%; overflow: hidden; position: relative; } img{ position: absolute; top:0; left:0; width:100%; }

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

При масштабировании появляется пробел между div — ми
Люди, кто сталкивался, помогите:) есть панелька, состоит из нескольких div-ов. Каждый div имеет.

Сохранение пропорций фонового изображения при резиновой верстке
Есть фоновое изображение, кторое тянется на 100% ширины. Как сделать, чтобы при изменение ширины.

Сохранение пропорций изображения при изменении рамзеров окна браузера?
наглядный пример масштабирования картинки при изменении окна браузера — просто картинка, открытая в.

Div выходит за пределы родительского блока при масштабировании (+скрин)
Есть внешний div (outer-outer), первый внутренний (outer), второй внутренний (inner) и внутри него.

Источник

Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS

Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера?

Для изображений это делается очень просто, задаем свойству height значение auto , при этом максимальную ширину изображения ограничиваем шириной родительского контейнера max-width: 100%;

Проблема в том, что мы не можем задать height: auto; для блочных элементов, например для DIV. В данном случае 100% — это будет высота родителя.

Решение проблемы

HTML

Нам нужны два блочных элемента для достижения желаемого поведения. Нет изображений, нет Javascript.

CSS

Итак, что это? Мы определяем псевдоэлемент для нашего ящика и задаем ему margin-top 100% . Поскольку это 100% значение относится к ширине элемента … вы получаете его ( height: 0; padding-bottom: 100%; также будет работать, но тогда вы должны отрегулировать значение padding-bottom каждый раз, когда вы меняете ширину).

Таким образом, наш блок уже выше ширины. Если вы хотите отображать только несколько цветных блоков, тогда уже все готово. Но поскольку пользовательский интерфейс намного сложнее, и если вы также предоставляете некоторый контент, мы добавляем контент в наш блок .box .

Контент

И вот трюк: мы просто позиционируем блок контента как абсолютный со всеми четырьмя ориентациями, установленными в 0. Это просто покрывает родительский элемент полностью, независимо от того, какой размер он имеет.

Вот и все. Блестяще, не так ли? Даже padding не сломает его, и нет необходимости в box-sizing: border-box здесь.

Другие пропорции

Если вы хотите создать другие коэффициенты, просто измените значение padding-top псевдоэлемента:

/* Other ratios */ .ratio2_1:before < padding-top: 50%; >.ratio1_2:before < padding-top: 200%; >.ratio4_3:before < padding-top: 75%; >.ratio16_9:before

IE7 и ниже

Поскольку IE такой IE, и особенно IE7 — это все, но только не браузер, вы должны сами создать элемент вместо псевдоэлемента в своей разметке, если хотите поддержать IE. Или бросьте на него Javascript, пока он, надеюсь, не сломается. Навсегда.
Мой вольный перевод статьи http://www.mademyday.de/css-height-equals-width-with-pure-css.html.

Рабочий пример на CodePen:

Вариант №2 — Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS без псевдоэлементов

Есть второй вариант без псевдоэлементов, но при его использовании блок всегда имеет ширину 100%, поэтому если нужно несколько таких блоков в ряд, то они должны быть помещены в какой-то родитель, у которого уже будет задана нужная ширина относительно остальных элементов на странице.

HTML

CSS

.box < background-color: red; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ position: relative; >/* If you want text inside of the container */ .content

Другие пропорции

.ratio16_9 < padding-top: 56.25%; /* 16:9 Aspect Ratio */ >.ratio4_3 < padding-top: 75%; /* 4:3 Aspect Ratio */ >.ratio3_2 < padding-top: 66.66%; /* 3:2 Aspect Ratio */ >/* Other ratios */ .ratio8_5 < padding-top: 62.5%; /* 8:5 Aspect Ratio */ >

Рабочий пример на CodePen:

Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS. В чем его особенность — при прокрутке…

Еще один фиксированный блок Меню при прокрутке страницы. Было бы замечательно, если бы IE поддерживало…

Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом…

Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда…

Источник

Как сохранить соотношение сторон (aspect ratio) div с помощью CSS

Я хочу создать div, который может изменять свою ширину / высоту при изменении ширины окна. Существуют ли какие-либо правила CSS3, позволяющие изменять высоту в соответствии с шириной при сохранении соотношения сторон?
Я знаю, что могу сделать это с помощью JavaScript, но я бы предпочел использовать только CSS. _{Свободный перевод вопроса Maintain the aspect ratio of a div with CSS от участника @ackb.}

2 ответа 2

vw units:

Вы можете использовать единицы vw как для ширины, так и для высоты элемента. Это позволяет сохранить соотношение сторон элемента в зависимости от ширины области просмотра.

vw : 1/100th от ширины viewport(области просмотра). MDN

В качестве альтернативы вы также можете использовать vh для высоты viewport (окна просмотра) или даже
vmin / vmax для использования меньшего / большего размера окна просмотра (обсуждение здесь).

Пример: 1:1 aspect ratio

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

 aspect ratio | умножить ширину на ----------------------------------- 1:1 | 1 1:3 | 3 4:3 | 0.75 16:9 | 0.5625 

Пример: квадратная сетка 4×4.

_{Свободный перевод ответа от участника @web-tiki.}

Вы можете добиться этого с помощью SVG.

Это зависит от случая, но в некоторых это действительно полезно. В качестве примера — вы можете установить background-image без установки фиксированной высоты или использовать его для встраивания youtube с соотношением сторон 16: 9, position:absolute и т. д.

Для соотношения 3: 2 установите viewBox = «0 0 3 2» и так далее.

_{Свободный перевод ответа от участника @Jakub.}

Источник

CSS force image resize and keep aspect ratio

But for big_image.jpg , I receive width=500 and height=600 . How do I set images to be re-sized, whilst keeping their aspect ratios.

26 Answers 26

This image is originally 400x400 pixels, but should get resized by the CSS:
 

This will make image shrink if it’s too big for specified area (as downside, it will not enlarge image).

Is there a version of this that will enlarge images to fit their container also? I’ve tried the max-width/max-height as numbers with width/height as auto, but as setec said above, it will not enlarge the image. I’ve tried using min-width/min-height also. I just can’t get the combination right. I simply want that whatever image I have to put into this container, it will display at it’s maximum size possible without changing aspect ratio regardless of whether that involves shrinking or growing the image to achieve that.

Note that the question was about an that itself includes a width and height and I think that means you need to use !important to circumvent the tag width/height info.

object-fit: cover; width: 100%; height: 250px; 

You can adjust the width and height to fit your needs, and the object-fit property will do the cropping for you.

More information about the possible values for the object-fit property and a compatibility table are available here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

The solutions below will allow scaling up and scaling down of the image, depending on the parent box width.

All images have a parent container with a fixed width for demonstration purposes only. In production, this will be the width of the parent box.

Best Practice (2018):

This solution tells the browser to render the image with max available width and adjust the height as a percentage of that width.

This image is originally 400x400 pixels, but should get resized by the CSS:
 
 

Fancier Solution:

With the fancier solution, you’ll be able to crop the image regardless of its size and add a background color to compensate for the cropping.

.parent < width: 100px; >.container < display: block; width: 100%; height: auto; position: relative; overflow: hidden; padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */ >.container img

This image is originally 640x220, but should get resized by the CSS:
 
 
 
 

For the line specifying padding, you need to calculate the aspect ratio of the image, for example:

640px (w) = 100% 220px (h) = ? 640/220 = 2.909 100/2.909 = 34.37% 

I don’t get it. I’ve loaded full HD images with both this and the accepted answer’s solution. Is it really being scaled becasue I can’t tell (tested on chrome and IE10+)

I love how standardization organizations were in a meeting once and all agreed: this should be the way people are going to achieve the desired result.

2018 solution is bad, when the parent has width/height ratio smaller than the image width/height ratio, the image end up stretched badly.

That won’t make too much sense. It’s a 15k lines of code web architecture. The specific code you posted will result in correct scaling for images that have lower aspect ratios than that of their parent container, but will not work if it is vice versa, resulting in stretching. I was specifically looking for a dynamic approach, as prior I do not know DIV size or image dimensions. In the end I solved this by preloading the image, calculating the aspect ratio, comparing it versus the aspect ratio of the area and then apply the proper CSS style.

Very similar to some answers here, but in my case I had images that sometimes were taller, sometimes larger.

This style worked like a charm to make sure that all images use all available space, keep the ratio and not cuts:

Is .img a class on the parent or the image? Could you make a jsfiddle with example for both portrait and landscape images?

Upvoted because it’s the first to mention object-fit: contain . In my experience, all that’s necessary is that plus either a height or width.

The background-size property is ie>=9 only, but if that is fine with you, you can use a div with background-image and set background-size: contain :

Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally within the div. Just don’t forget to set the sizes on the css since divs don’t have the width/height attribute on the tag itself.

This approach is different than setecs answer, using this the image area will be constant and defined by you (leaving empty spaces either horizontally or vertically depending on the div size and image aspect ratio), while setecs answer will get you a box that exactly the size of the scaled image (without empty spaces).

Edit: According to the MDN background-size documentation you can simulate the background-size property in IE8 using a proprietary filter declaration:

Though Internet Explorer 8 doesn’t support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter function:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')"; 

Источник