Блог

Главная - Вопросы по программированию - Изображения становятся меньше, когда я применяю display: flex

Изображения становятся меньше, когда я применяю display: flex

#html #css

#HTML #css

Вопрос:

Я пытаюсь воспроизвести эту идею с помощью Flexbox:

эта идея

Div колоды красного цвета, а карты дилера — зеленого.

 .table .dealer-area {
  grid-area: d;
  padding-left: 32px;
  width: 100%;
  
}

.table .dealer-area .shell-deck-and-cards{
  display: flex;
  margin-top: 25px;
  
}

.table .dealer-area .shell-deck-and-cards img{
  max-width:100%;
  max-height:100%;
}

.table .dealer-area .shell-deck-and-cards .deck, .table .dealer-area .shell-deck-and-cards .dealer-cards{
  width: 170px;
}

.table .dealer-area .shell-deck-and-cards .deck{
  margin-right: calc(100px - (0.3 * 100px));
}

.table .dealer-area .shell-deck-and-cards .dealer-cards {
  display: flex;
} 
 <div class="table">
<div class="dealer-area">
                <div class="dealer-name">
                    <h1>Dealer</h1>
                </div>
                <div class="shell-deck-and-cards">
                    <div class="deck">
                        <img src="assets/cards/back.svg">
                    </div>
                    <div class="dealer-cards">
                        <img src="assets/cards/2.svg">
                        <img src="assets/cards/2.svg">
                        <img src="assets/cards/2.svg">
                    </div>
                    

                </div>      
            </div>
 </div>

Размеры карт, когда я не применяю display flex, являются правильными, как видно здесь
Но как только я применяю гибкий дисплей, это результат.

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

Ответ №1:

использовать width вместо max-width или min-height вместо max-height 

 .table .dealer-area {
  grid-area: d;
  padding-left: 32px;
  width: 100%;
  
}

.table .dealer-area .shell-deck-and-cards{
  display: flex;
  margin-top: 25px;
  
}

.table .dealer-area .shell-deck-and-cards img{
  width:100%;
  max-height:100%;
}

.table .dealer-area .shell-deck-and-cards .deck, .table .dealer-area .shell-deck-and-cards .dealer-cards{
  width: 170px;
}

.table .dealer-area .shell-deck-and-cards .deck{
  margin-right: calc(100px - (0.3 * 100px));
}

.table .dealer-area .shell-deck-and-cards .dealer-cards {
  display: flex;
} 
 <div class="table">
<div class="dealer-area">
                <div class="dealer-name">
                    <h1>Dealer</h1>
                </div>
                <div class="shell-deck-and-cards">
                    <div class="deck">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                    </div>
                    <div class="dealer-cards">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                        <img src="https://sites.google.com/a/netcmmi.com/share/_/rsrc/1473734124982/img/png/s/star-e01.png">
                    </div>
                    

                </div>      
            </div>
 </div>

Комментарии:

1. в любое время вы также можете прочитать больше о размерах высоты / ширины css здесь