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

Question

[Антон Вебсайтовский]

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

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



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

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

Рабочий пример тут: https://jsfiddle.net/kgs8g9r9/1/

Answer 1

[Александр]

.newst img[style~="float:left;"] {
  margin: 10px 10px 10px 0;
}

.newst img[style~="float:right;"] {
  margin: 10px 0 10px 10px;
}

Comments

[Ankhena]

Еще такие img[align=left], если неизвестно кто, как и через что вставляет картинки.

[Александр]

Ankhena, да, но автор дал конкретный пример по которому и писался код.

[Ankhena]

Александр, не серчайте, я просто добавила возможность :)

[Антон Вебсайтовский]

Спасибо, я и не знал что так можно, это современный метод или старый?

[Антон Вебсайтовский]

Ankhena, А что насчет адаптации с картинкой, вопрос о котором я писал в теме, помогите решить.

[Антон Вебсайтовский]

Александр, А что насчет адаптации с картинкой, вопрос о котором я писал в теме, помогите решить.

[Ankhena]

Антон Вебсайтовский, что ж вам инспектор кода-то самому не открыть...

[Антон Вебсайтовский]

Ankhena, так я же писал в теме, видимо непонятно написал, я в контент вставляю фотки, которые при клике увеличиваются, то есть большие фото, но вставляю через стили размер меньше ее, вопрос такой, как мне сделать чтобы эта фотка была адаптивной? просто в разных местах я вставляю разный размер фото, а при клике она увеличивается, когда сжимаю экран браузера, то фото выходит за края, она не адаптивная.
Вот и думаю как это сделать. Чтобы она могла сжиматься меньше, не выходила за рамки.

[Ankhena]

Антон Вебсайтовский, используйте минимальную и максимальную ширину.
И media

[Антон Вебсайтовский]

Ankhena, я делал и не вышло.

[Антон Вебсайтовский]

Ankhena, а есть пример? может я не так делаю и не так это вижу.

[Ankhena]

Антон Вебсайтовский, Вы же Вебсайтовский, что значит не вышло?
Сделайте песочницу с одной картинкой и покажите, что не вышло.

[Александр]

Антон Вебсайтовский, убирайте у картинок в коде свойство height.

В стилях:

.newst img{
max-width: 100%;
padding: 5px 0 5px 0;
margin: 5px 0 5px 0;
}

[Антон Вебсайтовский]

Ankhena, а есть пример? может я не так делаю и не так это вижу.@Palehin,

я так понимаю вы тему не читали !

max-width: 100%; - так нельзя, я же не зря там поставил max-width: 790px;, это для того чтобы большая картинка была не больше контента.

Залил на тестовое доменное имя.
t.arinastar.ru/product/goroskop-roda--slavyanskiy-...

там 4 картинки, 1, она идет без стилей, через css задается стиль, который делает чтобы фотка не выходила за рамки контента. (max-width: 790px).
с этой картинкой 1 нет проблем, при сжатии, все ок, она сжимается, так как в ней нет стилей.

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



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

[Антон Вебсайтовский]

Ankhena, чуть выше написал суть ! чтобы понятно было и выложил сайт на тестовое доменное имя, чтобы понятнее было. а то может не понимаете меня.

[Ankhena]

Антон Вебсайтовский, сайт не хочу смотреть. Объясните на этом примере, что не устраивает.

Answer 2

[Ankhena]

Вот пример https://jsfiddle.net/2cx7oxay/
2 картинки, у второй в стайл указана ширина, у второй нет. Но есть ширина в стилях, можете ее убрать посмотреть что будет.

Comments

[Ankhena]

Антон Вебсайтовский, Объясните вот на этом моем примере, что не устраивает.

[Антон Вебсайтовский]

Спасибо, у тебя сжимается фотка ! а я тож самое сделал и у меня так не работает в примере на сайте. по той же ссылке, у фоток убрал height

[Антон Вебсайтовский]

если сжать браузер, и обновить то все ок делает ! а так если сжимать и не обновлять то не сжимает. б.л.я странно.

[Антон Вебсайтовский]

Все нашел в чем причина из за js, который мешал. он там для img определял если есть стили в картинки ! то делал кликабельной ее. применял lightbox.

[Ankhena]

Антон Вебсайтовский, никто из нормальных людей не таскает ширину браузера туда сюда

Если это хром в режиме адаптивного отладчика - то это проблемы хрома.

Если нет, то обычно это скрипты на ready, но без resize.

Answer 3

[MyMac]

Самое простое - пользоваться не стилями а классами (да и просто хороший тон):
Если <img class="img-left"> то потом легко и img.img-left {margin-right: 10px}

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

Comments

[Антон Вебсайтовский]

Да я понял, что придется через медиа делать, но есть одно но ! картинки могут вставлять разного размера и там через медия уже не сделать.
Не все так просто, max-width стоит.

[Антон Вебсайтовский]

Адаптация срабатывает для 1 картинки ! так как у нее нет размеров, они через стили. она не больше max-width 790px в контенте и при сжатии браузера, все ок, она сжимается, а другие картинки там фиксированное разрешение, и при сжатии, они вылезают за края контента и не сжимаются.

[MyMac]

Антон Вебсайтовский, имелось ввиду нечто вроде

img{
 max-width: 100%;
 height: auto!important;
}

Тогда будут сжиматься.

[Антон Вебсайтовский]

Опробовал, чет не сжимает фотку.


Вылезает за края.

[MyMac]

Это из-за отступов. В этом случае можно компоновать с media:
просто, например, выравнивая на узких экранах по центру:

img{
 max-width: 90%;
 height: auto!important;
}

@media only screen and (max-width: 640px) {
img{
/*using important only cause have "style" in elements*/
    display: block;
    margin: 0 auto!important;
    max-width: 90%!important;
    float: inherit!important; }
}

[Антон Вебсайтовский]

Как нет отступов, вот.

.newst img{
  width: 100%;
  //max-width: 790px;
  margin:10px 0 10px 0;
  
  max-width: 90%;
  height: auto!important;
}
.newst img[style~="float:left;"] {
  margin: 0 20px 10px 0;
  height: 100%;
}
.newst img[style~="float:right;"] {
  margin: 0 0 10px 20px;
  height: 100%;
}

max-width: 90%; - не подходит такой вариант, я допустим если хочу сделать картинку во всю длину, то я просто вставляю ее, хоть она 1500px в длину, но css не дает чтобы она в контенте была длиннее чем 790px в длину.

На скрине не показал, что я бывает еще вставляю картинку во всю длину контента. по мимо маленьких которые слева или справа в контенте. с ней все ок с фоткой на всю длину, она уменьшается при сжатии браузера. Так как в ней я стили не оставляю, просто вставляю и css делает чтобы она была не длиннее 790px, а маленьким фоткам, я задаю стили когда вставляю в коде контента, а не через css, вообще м при сжатии экрана браузера, надо чтобы как-то стили в фотках игнорировались и фотки маленькие сжимались.

проверил это

@media only screen and (max-width: 640px) {
img{
/*using important only cause have "style" in elements*/
    display: block;
    margin: 0 auto!important;
    max-width: 90%!important;
    float: inherit!important; }
}

центрирует, но есть но ! все равно куски текста залезают на фото.

[Антон Вебсайтовский]

Забыл написать что загрузил на хостинг на тестовое доменное имя.
t.arinastar.ru/product/goroskop-roda--slavyanskiy-...

Пример контента с фотками.