Манипуляции с images в контенте, адаптация и правильные отступы, как реализовать?

Здравствуйте.
Давно сталкиваюсь с проблемой адаптации картинок в контексте, всегда есть проблема с отступами, пример показываю на скрине, скрин прикрепил.

1) пункт, отлично сидит картинка, снизу и сверху есть отступ, вопросов нет.
2) пункт, есть отступы, но с текстом как-то не красиво выходит, (ка уникальная сама по себе), отрывок из текста, вообщем видно что строка текста выше от начала картинки, как с этим быть? ( и нет с низу отступа, куда он делся непонятно.
3) пункт, есть отступ с верху и снизу, с верху опять проблема, текст выше картинки, что не очень красиво, а с низу все ок.

5a0146b6ba9a0655948911.png

Вопрос про реализацию отступов слева и права, я их пока не стал ставить, реально ли через css сделать, допустим если картинка прижата к левому краю, то у нее отступ только справа, а если картинка прижата к правому краю, то у нее отступ только слева. Я надеюсь понятен смысл? (можно ли через css такое сделать? или только через js), чтобы скрипт js проверял картинку на float:left, если есть то добавляет к стилю margin-right:10px;, а если float:right, то добавляет margin-left:10px;.

Сделал адаптивные картинки чтобы они сжимались, но не все сжимаются, большая самая верхняя картинка на примере сжимается все ок, если браузер сжимать, а нижние картинки они меньше 280px не сжимаются, как с этим быть? ( при клике, они увеличиваются). То есть маленький размер картинки я вывожу через стили. Хотелось бы чтобы они еще и сжимались, если я браузер сжимаю.

Рабочий пример тут: https://jsfiddle.net/kgs8g9r9/1/
  • Вопрос задан
  • 277 просмотров
Решения вопроса 2
Palehin
@Palehin
Frontend
.newst img[style~="float:left;"] {
  margin: 10px 10px 10px 0;
}

.newst img[style~="float:right;"] {
  margin: 10px 0 10px 10px;
}
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Вот пример https://jsfiddle.net/2cx7oxay/
2 картинки, у второй в стайл указана ширина, у второй нет. Но есть ширина в стилях, можете ее убрать посмотреть что будет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
MyMac
@MyMac
Самое простое - пользоваться не стилями а классами (да и просто хороший тон):
Если <img class="img-left"> то потом легко и img.img-left {margin-right: 10px}

C адаптивностью тоже просто - либо в media либо max-width хоть в процентах у картинок с нужным классом.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы