CSS Изменение размера изображений, сохраняя форму

У меня есть формирование изображений, как показано здесь:

введите описание изображения здесь

Ниже приведен HTML-код. «вторая панель» — это основная оболочка, на которой находится фоновое изображение здания. Каждое изображение в форме «ромба» позиционируется абсолютно с помощью CSS со значениями в пикселях.

 <!-- Second panel -->
    <div id="second-panel" class="parallax-wrapper">
        <div id="second-panel-diamonds">
            <img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" />
            <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
            <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
            <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
        </div>
        <div class="parallax-panel">
            ...(not relevant)...
        </div>
    </div>

CSS:

#second-panel-diamonds{
    position: absolute;
    left: 1%;
    top: -5px;
}
#second-panel .second-panel-diamond{
    position: absolute;
    /* width: 22%; */
    width: auto;
    height: auto;
    max-width: 350px;
}
.second-panel-diamond:first-child{
    top: 250px;
    left: 90px;
}
.second-panel-diamond:nth-child(2){
    top: 80px;
    left: 260px;
}
.second-panel-diamond:last-child{
    left: 337px;
    top: 337px;
}

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

Есть ли способ сохранить эту форму при уменьшении изображения, или мне придется просто переделать его для меньших экранов?


javascript html css responsive
person Jordan Carter    schedule 10.08.2016    source источник
comment
Рассматривали ли вы возможность использования SVG для этого?   -  person Niet the Dark Absol    schedule 10.08.2016
comment
Каким образом позиционирование разбивается при использовании относительных размеров   -  person Jonas Wilms    schedule 10.08.2016
comment
@Jonasw Я думаю, что изображения технически расположены одинаково, но по мере того, как размер самого изображения увеличивается, пространство между ними становится меньше, а когда они становятся меньше, пространство увеличивается.   -  person Jordan Carter    schedule 10.08.2016
comment
@NiettheDarkAbsol Нет, не видел. Я не уверен, что это было бы преимуществом здесь, хотя?   -  person Jordan Carter    schedule 10.08.2016
comment
Чем использовать относительное пространство!   -  person Jonas Wilms    schedule 10.08.2016
comment
Используйте относительное пространство или sass, где вы можете вычислить ;-)   -  person Tobias S    schedule 10.08.2016
comment
@ТобиасК. Я не уверен, как бы я использовал здесь относительное пространство.   -  person Jordan Carter    schedule 10.08.2016
comment
@Jordan Carter: установите значения для левого, правого, верхнего, отступа, поля в %   -  person Jonas Wilms    schedule 10.08.2016
comment
@JordanCarter У меня была логическая ошибка. Вы можете использовать относительный интервал и sass. В sass вы можете вычислить относительный отступ элементов, как упоминал мой предыдущий докладчик. Взгляните на sass-lang.com/guide#topic-8.   -  person Tobias S    schedule 10.08.2016

Ответы (2)


arrow_upward
1
arrow_downward

Да, используя запросы CSS @media. Вам просто нужно уменьшить размер отображаемых изображений (вам не нужно использовать auto, если необходимо, calc(auto - px)) для определенных размеров экрана (не забудьте позже изменить положение каждого изображения):

@media screen and (max-width: 600px) {
    #second-panel .second-panel-diamond {
        position: absolute;
        width: 50px;
        height: auto;
    }
}

@media screen and (min-width: 601px) {
    #second-panel .second-panel-diamond {
        position: absolute;
        width: 100px;
        height: auto;
    }
}
person Klaider    schedule 10.08.2016
comment
Я попробовал второе решение, задав каждому ромбу ширину: 22% и задав контейнеру-обертке #second-panel-diamonds ширину 122%. Однако пространство между каждым ромбом не масштабируется в соответствии с новой шириной изображений. Я думаю, что мне придется использовать решение для медиа-запросов и просто продолжать корректировать позиционирование пикселей. - person Jordan Carter; 10.08.2016

arrow_upward
0
arrow_downward

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

person Radek    schedule 10.08.2016
comment
Они должны быть отдельными, поскольку для каждого из них может потребоваться отдельная анимация. - person Jordan Carter; 10.08.2016