Каким образом растянуть картинку на всю колонку bootstrap 4?

Question

[malayamarisha]

Доброго времени суток!
Есть блок с колонками. В данных колонках отображается изображение. Изображения могут быть разной ширины/высота.
Подскажите, пожалуйста, каким образом можно растянуть изображение на всю колонку вне зависимости ширины/высоты.
img-responsive не помогает

<? foreach ($arResult["ITEMS"] as $arItem): ?>
        <div class="col-lg-4">
            <div class="wrap_images">
                <? if ($arParams["DISPLAY_PICTURE"] != "N" && is_array($arItem["PREVIEW_PICTURE"])): ?>
                    <? if (!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])): ?>
                        <a href="<?= $arItem["DETAIL_PAGE_URL"] ?>">
<img class="img-responsive" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
                        </a>
                    <? else: ?>
                        <img class="img-responsive" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
                    <? endif; ?>
                <? endif ?>
            </div>
        </div>
    <? endforeach; ?>

Answer 1

[drawnofmymind]

object-fit: cover

Comments

[malayamarisha]

если у img сделать object-fit: cover, то картинки отображаются без изменений, т.е. одна больше, одна меньше

[drawnofmymind]

width: 100%
height: 100%

[malayamarisha]

drawnofmymind, тоже без изменений

[drawnofmymind]

malayamarisha, смотри,оберни картинку в див допустим 200px x 200px(по макету смотри)
примени для img:{
object-fit: cover
width: 100%
height: 100%
}
должно сработать

[malayamarisha]

drawnofmymind, кажется помогло, только с присвоением класса img

<img class="img-responsive cover" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
.cover
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

Спасибо Вам огромное за подсказку )
Не подскажите ), каким образом при наведении можно сделать затемнение и появление "кнопки" по центру?

[drawnofmymind]

malayamarisha,
https://codepen.io/Dwstroy/pen/EbdNyb
за основу)
Если помог - отметьте решением)

[malayamarisha]

Итог:

<? foreach ($arResult["ITEMS"] as $arItem): ?>
    <?
    $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
    $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    ?>
    <div class="col-md-4">
        <div class="article_card">
            <div class="block__all">
                <div class="block__img">
                    <? if ($arParams["DISPLAY_PICTURE"] != "N" && is_array($arItem["PREVIEW_PICTURE"])): ?>
                        <? if (!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])): ?>
                            <div class="height__img">
                                <a href="<?= $arItem["DETAIL_PAGE_URL"] ?>">
                                    <img class="img-responsive cover" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>"
                                         alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>"
                                         title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
                                </a>
                            </div>

                        <? else: ?>
                            <div class="height__img">
                                <a href="<?= $arItem["DETAIL_PAGE_URL"] ?>">
                                    <img class="img-responsive cover" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>"
                                         alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>"
                                         title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
                                </a>
                            </div>
                        <? endif; ?>

                    <? endif ?>
                    <a href="<?= $arItem["DETAIL_PAGE_URL"] ?>">
                        <div class="block__text">
                            <div class="text">
                                <p>Читать</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="article_card-title">
            <? if ($arParams["DISPLAY_DATE"] != "N" && $arItem["DISPLAY_ACTIVE_FROM"]): ?>
                <span class="news-date-time"><? echo $arItem["DISPLAY_ACTIVE_FROM"] ?></span>
            <? endif ?>
            <? if ($arParams["DISPLAY_NAME"] != "N" && $arItem["NAME"]): ?>
                <? if (!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])): ?>
                    <a href="<? echo $arItem["DETAIL_PAGE_URL"] ?>"><b><? echo $arItem["NAME"] ?></b></a><br/>
                <? else: ?>
                    <b><? echo $arItem["NAME"] ?></b><br/>
                <? endif; ?>
            <? endif; ?>
        </div>
    </div>
<? endforeach; ?>

Стили

.height__img
{
	height: 300px;
}
.cover
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cover__fit
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.block__img {

	overflow: hidden;
	background: #000;
	cursor: pointer;
}
.block__img img {
	width: 100%;
	transition: .5s;
}
.block__all:hover .block__img img {
	opacity: .5;
}
.block__text {
	position: absolute;
	top: 30px;
	left: 30px;
	right: 30px;
	bottom: 30px;
}
.text {
	color: #fff;
	text-transform: uppercase;
	/*padding: 0 20px;*/
	opacity: 0;
	transition: .5s;
	position: absolute;
	top: 45%;
	left: 40%;
}
.block__all:hover .text {
	opacity: 1;
}
.block__text::before,
.block__text::after{
	content: '';
	position: absolute;
	top: 40%;
	left: 25%;
	width: 50%;
	height: 20%;
	transition: .5s;
}
.block__text::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: scale(0,1);
}
.block__text::after {
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: scale(1,0);
}
.block__all:hover .block__text::before,
.block__all:hover .block__text::after{
	transform: scale(1,1);
}