Получение процентного результата CSS calc

Question

Я пытаюсь получить некоторый отзывчивый CSS, который изящно изменяет размер элемента изображения.

В пределах одного диапазона (@media screen and (min-width: 600px) and (max-width: 960px)) Хочу Процентная ширина моего изображения для изменения.

В частности, на этапе 960, я хочу, чтобы это эффективно было width: 50%, но до 600, я хочу, чтобы это эффективно было width: 38.1966%. Для каждого уменьшения ширины пикселя ширина, которая мне нужна, уменьшается на 0,032787%.

До сих пор я не нашел способа получить calc(), чтобы справиться с этим.

Фактически необходимо выполнить первый расчет: (960px - 100vw). К сожалению, это дает результат в пикселях, тогда как мне нужно, чтобы он преобразовывался в число, которое я могу умножить на мою процентную процентную дисперсию.

Возможно ли это?

Answer 1

Если вы хотите использовать JQuery:

После того как вы вычисленное значение в CSS, как вы упомянули, вы получите получить его с var itemWidth = $('#id').innerWidth();. Затем, вы можете получить ширину страницы с var bodyWidth = $('body').innerWidth();

Таким образом, вы можете написать скрипт, который использует bodyWidth и itemWidth вычислить процент var percentVar= itemWidth/bodyWidth * 100; и использовать, чтобы установить ширину элемента $("#id").css("width", percentVar);.

Итак, JQuery будет выглядеть вдоль этих линий:

var main = function(){ 
    var itemWidth = $('#id').innerWidth(); 
    var bodyWidth = $('body').innerWidth(); 
    var percentVar= itemWidth/bodyWidth * 100; 
    $("#id").css("width", percentVar); 
} 

$(document).ready(main) 

Или, если бы вы хотите использовать его, сделать функцию и положить, что в основной функции

var main = function(){ 
    element_sizer('#id'); 
    element_sizer('#id2'); 
} 

$(document).ready(main)  

function element_sizer(id) { 
    var itemWidth = $(id).innerWidth(); 
    var bodyWidth = $('body').innerWidth(); 
    var percentVar= itemWidth/bodyWidth * 100; 
    $(id).css("width", percentVar); 
} 

Примечание: вы можете использовать width, innerWidth, outerWidth в зависимости от того, что вам нужно link

Answer 2

Pure CSS .. это hone stly беспорядок, но он будет работать:

Fiddle: http://jsfiddle.net/r9xwL0rb/

CSS:

@media screen and (min-width: 600px) and (max-width: 960px){img{width: 50%;}} 
@media screen and (min-width: 600px) and (max-width: 959px){img{width: 49.96721278%;}} 
@media screen and (min-width: 600px) and (max-width: 958px){img{width: 49.93442556%;}} 
@media screen and (min-width: 600px) and (max-width: 957px){img{width: 49.90163833%;}} 
... etc (see fiddle for complete source)