Поддержание квадратного отношения в горизонтальной манере ответа

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

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

Вот макет того, что я пытаюсь достичь, используя Flex, чтобы показать макет окна. Я не привязан к Flex как часть решения.

Пример кода

.card { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
} 
 

 
.card .title { 
 
    line-height: 3rem; 
 
    font-size: 1.5rem; 
 
    font-weight: 300; 
 
} 
 

 
.card .action { 
 
    background: grey; 
 
    order: 3; 
 
    flex-basis: 100%; 
 
} 
 

 
.card .content { 
 
    background: red; 
 
    order: 2; 
 
    flex-grow: 1; 
 
} 
 

 
.card .image { 
 
    background: gold; 
 
    order: 1; 
 
    flex-grow: 1; 
 
}

<div class="row"> 
 
    <div class="medium-6 columns end"> 
 
    <div class="card"> 
 
     <div class="content"> 
 
     <span class="title"> 
 
      Just a Title 
 
     </span> 
 
     </div> 
 
     <div class="action"> 
 
     <p>this is an action</p> 
 
     </div> 
 
     <div class="image"> 
 
     <p>Image goes here</p> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="content"> 
 
     <span class="title"> 
 
      Title with some text 
 
     </span> 
 
     <P>This is some content under the title</P> 
 
     </div> 
 
     <div class="action"> 
 
     <p>this is an action</p> 
 
     </div> 
 
     <div class="image"> 
 
     <p>Image goes here</p> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="content"> 
 
     <span class="title"> 
 
      Title with more text 
 
     </span> 
 
     <P>This is some content under the title</P> 
 
     <P>Second line of text</P> 
 
     </div> 
 
     <div class="action"> 
 
     <p>this is an action</p> 
 
     </div> 
 
     <div class="image"> 
 
     <p>Image goes here</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-02-14 Declan_K

Попробуйте добавить этот скрипт в конце вашей работы:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script> 
<script> 
    var cw = $('.image').width(); 
    $('.image').css({ 
    'height': cw + 'px' 
    }); 
</script>

EDIT

Чтобы воздействовать на Wi ndow размер, попробуйте следующее:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script> 
<script> 
    var cw = $('.image').width(); 
    $('.image').css({ 
    'height': cw + 'px' 
    }); 
window.onresize = function(event) { 
    var cw = $('.image').width(); 
    $('.image').css({ 
    'height': cw + 'px' 
    }); 
}; 
</script>

источник

2017-02-14 15:02:51

Как это реагировать, как пользователь изменяет размер страницы? –

Проверьте редактирование для изменения размера окна. –

@Declan_K Я только понял, что он будет конфликтовать, потому что он получает первый класс .image и использует его для всех изображений. Поэтому, чтобы использовать этот метод, вам придется использовать уникальные идентификаторы или разработать этот javascript, но это мне известно. Сожалею. –

Вы можете это сделать, если ваши изображения будут квадратные

.card { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
} 
 

 
.card .title { 
 
    line-height: 3rem; 
 
    font-size: 1.5rem; 
 
    font-weight: 300; 
 
} 
 

 
.card .action { 
 
    background: grey; 
 
    order: 3; 
 
    flex-basis: 100%; 
 
} 
 

 
.card .content { 
 
    background: red; 
 
    order: 2; 
 
    flex-grow: 1; 
 
} 
 

 
.card .image { 
 
    background: gold; 
 
    order: 1; 
 
    flex: 1; 
 
    max-width: 30vw; /* scale img block with page */ 
 
} 
 

 
.card .image img { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="row"> 
 
    <div class="medium-6 columns end"> 
 
    <div class="card"> 
 
     <div class="content"> 
 
     <span class="title"> 
 
      Just a Title 
 
     </span> 
 
     </div> 
 
     <div class="action"> 
 
     <p>this is an action</p> 
 
     </div> 
 
     <div class="image"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300"> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="content"> 
 
     <span class="title"> 
 
      Title with some text 
 
     </span> 
 
     <P>This is some content under the title</P> 
 
     </div> 
 
     <div class="action"> 
 
     <p>this is an action</p> 
 
     </div> 
 
     <div class="image"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300"> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="content"> 
 
     <span class="title"> 
 
      Title with more text 
 
     </span> 
 
     <P>This is some content under the title</P> 
 
     <P>Second line of text</P> 
 
     </div> 
 
     <div class="action"> 
 
     <p>this is an action</p> 
 
     </div> 
 
     <div class="image"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img%20goes%20here&w=300&h=300"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-02-14 17:31:10

Поддержание квадратного отношения в горизонтальной манере ответа

ответ

Смежные вопросы