Как масштабировать этот макет? - программирование
Подтвердить что ты не робот

Как масштабировать этот макет?

Работая над этим макетом в течение некоторого времени, и каждый из способов, которыми я пользуюсь, я сталкиваюсь с каким-то препятствием (v1 здесь: https://stackoverflow.com/info/14572569/how-can-i-contain-pos-abs-div-within-specific-area)

То, что я пытаюсь сделать сейчас, - это иметь размер .spread, адаптируемый к ширине и высоте окна браузера, поэтому он никогда не будет превышать то, что пользователь в данный момент может видеть в своем браузере (в настоящее время в распространении имеется фиксированная ширина /height, для демонстрационных целей). Идеал мог бы изменять размер "на лету", и он мгновенно адаптируется (т.е. Нет медиа-запросов).

Он работает так, как должен в версии v1, ссылка на которую я ссылаюсь выше, но тогда у меня были проблемы с эффектом затухания из-за того, что .spread не хватало фактической ширины/высоты.

Здесь новая демо:
http://jsbin.com/uciguf/1

ОБНОВЛЕНИЕ: разметку можно изменить, если она работает, как описано.

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src="http://s7.postimage.org/8qnf5rmyz/image.jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src="http://s7.postimage.org/kjl89zjez/image.jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <a href="#scroll_spread-1"><img src="http://s7.postimage.org/5l2tfk4cr/image.jpg"></a>
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-3"><img src="http://s7.postimage.org/fjns21dsb/image.jpg"></a>
                </div>
            </div>
        </div>  
    </div>  
</div>

 

html {
    height: 100%;
}

body {
    background: #eee;
    line-height: 1.2em;
    font-size: 29px;
    text-align: center;
    height: 100%;
    color: #fff;
}

.scrollblock {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;

    overflow: hidden;
}

.contentblock {
    margin: 0;
    width: 0;
    min-height: 100%;

    overflow: hidden;

    position: fixed;
    top: 0;
    right: 0;
}

.contentblock .inner {
    z-index: 2;

    position: absolute;
    right: 0;
    top: 0;

    background: #eee;
}

.fade {
    width: 100%;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;

    background-color: #000;
    opacity: 0;

    z-index: 3;
}

.content {
    height: 100%;   
}

.content span {
   height: 100%;
   vertical-align: middle;
   display: inline-block;
}

.content .spread {
    vertical-align: middle;
    display: inline-block;
}

#spread-1 {
    color: #000;
    z-index: 105;
}

#spread-2 {
    z-index: 110;
}

.spread {

    max-height: 800px;
    max-width: 1130px;
    position: relative;
}

.spread .left {
    position: relative;
    width: 50%;
    float: left;
    text-align: right;
    height: 100%;
}
.spread .right {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    height: 100%;
}

div.centerimage {
    overflow: hidden;
}
div.centerimage img {
    max-width: 100%;
    max-height: 100%;
}

div.centerimage span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
div.centerimage img {
    vertical-align: middle;
    display: inline-block; 
}

P.S. Название действительно плохое, не знаю, что я ищу, но, пожалуйста, перейдите к чему-то более информативному, если вы можете думать о чем-нибудь лучше.

4b9b3361

ОТВЕТЫ

Ответ 1

Три четверти пути к полному решению

Это еще не совсем полное решение, так как оно не может вместить размер окна с очень узкой шириной (как и в вашей старой версии). Однако это хороший шаг к тому, что вы ищете.

Вот пример.

Основные изменения, которые были изменены:

Добавлен

.spread { height: 93%; } /* You had originally wanted a height difference */

Удалено

  • overflow: hidden из div.centerimage.
  • width: 50% от .left и .right.

Ответ 2

возможно, вы могли бы просто прикрепить ваш .spread divisor

.spread {
  bottom: 11px;
  left: 11px;
  right: 11px;
  top: 11px;
  position: absolute;
  /* ... */
}

Таким образом, он будет изменен так же, как и область просмотра.

Здесь jsFiddle, чтобы продемонстрировать.

Выполнять

Ответ 3

Я знаю, что вы, вероятно, искали исключительно CSS/HTML-решение, но на самом деле вам, вероятно, лучше всего использовать Javascript. Нет никакого способа быть чистым и точным, просто используя CSS и HTML. Но если вы запустите крошечный бит JavaScript при загрузке страницы и изменении размера окна, ваши divs могут иметь фактические значения высоты/ширины и масштабироваться чисто. Хитрость заключается в том, чтобы внешний div получил свою ширину/высоту, установленную JavaScript, а затем все его дети используют% размеров, чтобы они соответствовали друг другу.

Здесь основываются на некоторых JQuery:

<script type="text/javascript">
//Function to get the current window dimensions.
function get_window_dims() {
    var dims = [];
        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                dims[0] = window.innerWidth;
                dims[1] = window.innerHeight;
            }
            if (navigator.appName.indexOf("Microsoft")!=-1) {
                dims[0] = document.body.offsetWidth;
                dims[1] = document.body.offsetHeight;
            }
        }
    return dims;
}
function ResizeDivs {
    var dims = get_widnow_dims();
    var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width
    $('div.spread').css('width',div_width+'px');
}
$(function() {
    ResizeDivs();
    $(window).resize(function(){
         ResizeDivs();
    });
});
</script>

Вы можете легко очистить этот код, чтобы быть более кратким, но я подумал, что выложите его здесь таким образом, чтобы увидеть все части. Если вы хотите потратить дополнительное время, вы даже можете добавить JQuery для анимации div, когда размер окна изменится.

Надеюсь, что это поможет.

Ответ 4

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