Изображение внутри элемента внутри столбца исчезает с Bootstrap и flexbox - PullRequest
Новая
       23

Изображение внутри элемента внутри столбца исчезает с Bootstrap и flexbox

0 голосов
/ 04 мая 2020

У меня следующая проблема:

Я использую Bootstrap 4 и хочу центрировать img внутри div внутри столбца. Вот код: 

<div class="container-fluid">
        <div class="row blok ">

            <div class="col-lg-4 d-flex justify-content-center">
                <div class="box_proj">
                </div>
            </div>

            <div class="col-lg-4 d-flex justify-content-center">
                <div class="box_proj">

                    <img src="image/SVG/Math.svg" alt="Mathematical Symbol">

                    <div class="logolangage">
                        <img src="image/SVG/Python-logo-notext.svg" alt="logo python" width="30px">
                    </div>
                </div>
            </div>

            <div class="col-lg-4 d-flex justify-content-center">
                <div class="box_proj">
                </div>
            </div>

        </div>
    </div>

и следующий css код: 

.box_proj{
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #f4a261 ;
    height: 150px;
    width: 200px;
    border-radius: 1cm;
}
.box_proj img{
    max-width: 80%;
}

.logolangage{
    position: absolute;
    top: 135px;
    right: 15px;
}
.blok{
    margin: 50px 0; 
}

Так что это работает, и я получаю это: image

Но если я помещу img внутрь div, изображение полностью исчезнет. Кто-нибудь имеет представление о том, что происходит? У меня уже была проблема с flexbox и изображением, изображение было слишком большим и переполнило окно (но решение дано здесь , если интересно.)

Спасибо :)

Решение: Спасибо за ответ (удалено)

HTML 

                        <div class="Test">
                            <img src="image/SVG/WhiteRes.svg" alt="Mathematical Symbol">
                        </div>

                        <div class="logolangage">
                            <img src="image/SVG/Python-logo-notext.svg" alt="logo python" width="30px">
                        </div>
                    </div>
                </div>

И CSS: 

.box_proj{
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #f4a261 ;
    height: 150px;
    width: 200px;
    border-radius: 1cm;
}
.box_proj .Test{
    width: 80%;
}

.box_proj .Test img{
}

width:80% должны быть введены в .Test. Иначе, img будет 80% ничего, поэтому он объясняет, почему он исчезает. Другое решение состоит в том, чтобы придать изображению ширину: .box_proj .Test {} 

.box_proj .Test img{
    width:100px;
}

Но когда установлено значение width:50%;, неожиданно изображение больше не центрируется по горизонтали. Это происходит потому, что изображение занимает 50% от .Test div, которое само центрируется и занимает 100% ширины .box_proj, но поскольку display:flex не применяется непосредственно в .Test, дочернем элементе (здесь изображение ) не центрирован.

Но я не понимаю, почему ширина изображения в файле HTML не применяется в этом случае. Кто-нибудь, пожалуйста, ответьте на это? Спасибо

...