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

https://jsfiddle.net/9zsat8re/


PS. Изображение должно поместиться в максимальном размере, без выступов за границы ВИДИМОЙ ЧАСТИ ЭКРАНА(резиновая верстка) и рамка должна лежать по самому изображению.

держите https://jsfiddle.net/9zsat8re/1/

Это не то
Вот наглядный пример.

Имеем это


А надо получить вот это!


Так же обратите внимание на рамку

на фон нельзя повесить бордер.
а вон нарисовать на картинке - можно

Kusss
фон оранжевый, на него я не вешаю бордер
бордер вешаю на блок с изображением.

#post {
	height: 100%;
}

твой мишка - это тоже фон.

#post {
	background: url(http://www.radionetplus.ru/uploads/posts/2013-05/1369460629_panda-1.jpeg) no-repeat;
	background-size: cover; /* убрал contain */
    background-position: right; /* center, left, right, etc */
	height: 100%;
	width: 100%;
	margin: auto;
	border-style: solid;
    
}

Уточню задачу.

Есть картинка - фон.
Надо ее разместить на ВИДИМОЙ области экрана таким образом, чтоб она ПОЛНОСТЬЮ, отобразилась в максимальном разрешении(можно сжимать и увеличивать, НО НЕ ОБРЕЗАТЬ), а оставшееся пространство залить определенным цветом. Размеры блока должны быть подстроены под размеры картинки(фона), чтоб можно было обвести в бордер.


Сейчас все это делаю через js, но хотелось бы сделать на css

body {
    background: #3c3c3c;
    color: white;
    margin: 0;
    width: 100%;
}
#wrapper{
    background: url(../img/pol.jpg) no-repeat right center;
    background-size: cover;
    border: 2px solid red;
    display: block;
    height: h%;
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -h/4%;
}

где h = (высота изображения в px/длинна изображения в px)*100

_____________
Youtube канал WebDeveloper->Run()
Сайт для души
Gitter

Что-то не полностью работает Ваш вариант!

Размеры изображения: 1080 x 1920
1080/1920/100 = меньше нуля..
по этому я не поделил, а умножил на 100. Получилось 55

Но не работает... Растяните окно просмотра, фон обрезается

https://jsfiddle.net/s0sd2308/

решил задачу с помощью calc()

вот что получилось!
https://jsfiddle.net/s0sd2308/1/
PS. на jsfiddle.net что-то не на всю ширину, но у меня все работает на ура!
Теперь как выровнять по центру вертикали?
думал margin: calc((100vh-(100vw/1701*933))/2) 0;
но в clc можно использовать только одну единицу измерения (vh и vw вместе использовать нельзя)

123456
у calc еще куча багов! я как-то писал код. Так не понимал- почему какой-то оператор не работает! Оказывается- там еще и проблы ставить обязательно!

top: 50%;
margin-top: -x; /*x высчитать*/