Бустсрам. Кривой сайт, надо исправить. Как преобразовать сетку с изображениями?

Question

[Денис Букреев]

www.luxtort.ru/statii вот страница
сайт сверстан на бустстстстсраме

На странице есть пара блоков, в которых ссылки-картинки в виде сетки.

код у них такой:

<span>
    <a href="">
        <img src="kortinka.жипег" />
    </a>
</span>

Изображения все разных размеров. Гений верстки задал изображениям стили инлайново - ширина, высота, хотя картинки не особо доверяют этим значениям, слушаются только ширины.

И вот передо мной задача: выровнять всю эту тему.

Что хочу сделать я: сделать так, чтобы все картинки были 240х240, а все, что не влезло в этот промежуток - обрезалось.

Вот бьюсь я бьюсь уже второй вечер - ничего не помогает, все криво, бустстстсрам не дает мне нормально сверстать.

Памагити, спасиб)

Comments

[Yaroslav Lyzlov]

max-height:240px для img?

[Денис Букреев]

Yaroslav Lyzlov: я пытался
но тогда ширина они ужимаются, как изюм
при width: auto они, понятное дело, становятся маленькими по ширине

пытался применить overflow: hidden для спана или а, но они картинку не прятали

[Yaroslav Lyzlov]

Тогда выставить блоку размер и background-size: cover может?

[Денис Букреев]

Yaroslav Lyzlov: помогло
пора обновлять знания

[Yaroslav Lyzlov]

Ок, супер

[Yaroslav Lyzlov]

Напишу в ответ, чтобы люди видели.

[Денис Букреев]

Yaroslav Lyzlov: да поставлю решение, поставлю)

[Андрей]

Там Бутстрап два раза подключен (минифицированная и обычная версии). И ни разу не используется.
Например, сетка сделана на inline-block, а box-sizing: border-box, на котором вся эта библиотека сделана, не используется... Там всего несколько элементов бутстраповских, типа кнопок, используется и все.

Answer 1

[Владислав Серов]

Убери у картинок в HTML ширину и высоту.

<img src="/images/IMG_5081.JPG" alt="" style="opacity: 1;">

span.moloko a {
    /* overflow: hidden; */
    /* max-height: 160px; */
    overflow: hidden;
    width: 240px;
    height: 240px;
    display: block;
}
.moloko {
    display: inline-block;
    background-color: #fff;
    position: relative;
}
span.moloko img {
    vertical-align: top;
    width: 100%;
    height: 100%;
}

Comments

[Владислав Серов]

Денис Букреев: Отредактировал пробуй

[Денис Букреев]

я что-то не так делал, но я несколько раз это проворачивал - не помогало)
а сейчас сработало
спасиб)

[Владислав Серов]

Денис Букреев: Не за что :)
Но вёрстка не очень)

[Денис Букреев]

Владислав Серов: если ставить по 100% картинкам, то они как изюмчик сжимаются

[Денис Букреев]

Владислав Серов: да я сам с ней страдаю уже давно
заказчик постоянник, не могу отказать

[Владислав Серов]

Денис Букреев: ну тут бутстрапом и не пахнет))

[Денис Букреев]

Владислав Серов: разве?
там вроде классы есть бустсрамовские

[Владислав Серов]

Денис Букреев: ну очень плохая вёрстка, бутстрап не правильно применён

[Денис Букреев]

Владислав Серов: даже если не бустсрам, то все равно бустсрам, потому что система та же)

[Денис Букреев]

Владислав Серов: 8257 строк кода в css)

[Владислав Серов]

Денис Букреев: :DD

Answer 2

[Yaroslav Lyzlov]

Выставить блоку размер и background-size: cover