Помощник
|
Как сделать чтобы картинка по ширине подстраивалась под блог? |
pozitron123
|
Сообщение
#1
|
||
|
|
||
|
|||
ShowPrint |
26.1.2017, 19:55;
Ответить: ShowPrint
Сообщение
#2
|
|
pozitron123, если все картинки разные по размеру, то можно в стилях кода, если все одинаковые, или существует повторяемость, то лучше через css.
Пример к первому варианту:
Ко второму:
Сообщение отредактировал ShowPrint - 26.1.2017, 20:27 |
|
|
pozitron123
|
Сообщение
#3
|
|
если все картинки разные по размеру, то можно в стилях кода, если все одинаковые, или существует повторяемость, то лучше через css. Не понял я. 1.Первый вариант: <img src="..." alt="..." title"..." style="width:20%;max-width:250px"> это в коде картинки как я понимаю? 2. Ко второму: Это нужно в css прописать код: .imgStyle{width:20%;max-width:250px} А потом в коде картинки это: <img src="..." alt="..." title"..." class="imgStyle"> И все картинки автоматом будут подстраиваться? Если не сложно объясните на пальцах где и что нужно прописывать чтобы картинки по ширине подстраивались? |
|
|
ShowPrint |
26.1.2017, 20:37;
Ответить: ShowPrint
Сообщение
#4
|
|
это в коде картинки как я понимаю? Абсолютно верноИ все картинки автоматом будут подстраиваться? Да, все картинки у которых указан класс imgStyleВы всё правильно поняли, что ещё на пальцах объяснить? "На пальцах" - это на конкретном примере. За ширину отвечают css-параметр width, устанавливать его лучше в процентах от того блока в котором картинка размещена - так она получается "резиновой"... max-width (не обязательно, но я устанавливаю) - прописывается для того, чтоб картинка не превышала своих фактических размеров. По сути max-width равен физической ширине картинки, устанавливаю такое ограничение я потому что при увеличении больше оригинала сильно снижается качество картинки, и на тот случай чтоб не переделывать код когда будут выпускать мониторы с разрешением 100000px по ширине - она всё равно останется оригинального размера, правда мелкая, но качества не потеряет. |
|
|
pozitron123
|
Сообщение
#5
|
|
Вы всё правильно поняли, что ещё на пальцах объяснить? Не понятно это нужно в сам блок прописывать? Или есть какие то общие параметры для всех картинок, не помню. В какой именно файл это прописывать? Раньше находил, а сейчас уже подзабыл да и шаблон другой. Элемент через браузер исследую и что то не догоняю блин. CSS: .imgStyle{width:20%;max-width:250px} |
|
|
pozitron123
|
Сообщение
#6
|
|
Вот что прописано при иследование элемента:
А вот что прописано где картинки нормально отображаются. Может в тот код вставить этот код? Как вы думаете?
|
|
|
ShowPrint |
26.1.2017, 23:00;
Ответить: ShowPrint
Сообщение
#7
|
|
pozitron123,
"На пальцах" - это на конкретном примере. "Конкретный пример", это не два куска текста, а адрес страницы с формулировкой какие конкретно Картинки по ширине не вписываются в блок шаблона вылезают дальше По тому что вы написали я, к сожалению, ничего подсказать не могу. |
|
|
pozitron123
|
Сообщение
#8
|
|
Конкретный пример На счет примеров я вас примерно сразу понял, все манипуляция я на денвере провожу поэтому адрес страницы с проблемами естественно скинуть не могу. Извиняюсь за свое хреновое объяснение, ниже код с сайта где картинки отображаются нормально. Можно ли его вставить в код шаблона на денвере где картинки отображаются некорректно? А вот что прописано где картинки нормально отображаются. Может в тот код вставить этот код? Как вы думаете? img { max-width: 100%; width: auto; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; Я хочу поменять шаблон на сайте где картинки отображаются нормально на шаблон который юзаю на денвере, пытаюсь понять все ли мне подходит и столкнулся с проблемой с картинками. По тому что вы написали я, к сожалению, ничего подсказать не могу. Это с шаблона где картинки слишком вылазят за ширину блока: Вот что прописано при иследование элемента: img { vertical-align: baseline; Это с сайта где все с картинками в норме, но на который я хочу поставить другой шаблон: А вот что прописано где картинки нормально отображаются. Может в тот код вставить этот код? Как вы думаете?
img { max-width: 100%; width: auto; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; Прошу ответить мне интересно вы меня хоть поняли что я имею ввиду? Сообщение отредактировал pozitron123 - 27.1.2017, 0:18 |
|
|
ShowPrint |
27.1.2017, 10:58;
Ответить: ShowPrint
Сообщение
#9
|
|
вы меня хоть поняли что я имею ввиду? Да понял я, понял... Только по куску css я к сожалению ничего не могу подсказать... Стили это только часть параметров, их применение зависит от того ка именно элементы вписаны в html и страницу в целом... При работе в локалке, не видя всего кода страницы, помочь не могу.Может в тот код вставить этот код? Попробуйте и посмотрите на результат, только не забывайте сохранить текущую версию, чтоб её можно было восстановить.Я в таких случаях вообще делаю отладку кода не в файлах, а через "инструменты разработчика", а когда добьюсь нужного мне результата переношу его в нужное место. За ширину отвечают css-параметр width, устанавливать его лучше в процентах от того блока в котором картинка размещена - так она получается "резиновой"... max-width (не обязательно, но я устанавливаю) - прописывается для того, чтоб картинка не превышала своих фактических размеров "Играйте" в локалке с этими параметрами для элемента и смотрите на результат |
|
|
pozitron123
|
Сообщение
#10
|
|
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Burzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ) | 3 | cryptius | 886 | Сегодня, 14:47 автор: cryptius |
|
Как в пушсетках покупают по 100-200 тысяч кликов за день? | 2 | Boymaster | 705 | Вчера, 17:52 автор: Boymaster |
|
Жирные бурж ссылки под крипту Размещаем статьи на популярных международных сайтах |
0 | umexa | 355 | 23.4.2024, 23:23 автор: umexa |
|
SEO-продвижение USA, Europe, Asia под ключ | Dating, Gambling, Essay и 10+ ниш | 3 | Needmylink1 | 1039 | 23.4.2024, 21:26 автор: Needmylink1 |
|
SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией | 21 | Needmylink1 | 7189 | 23.4.2024, 21:16 автор: Needmylink1 |
Текстовая версия | Сейчас: 25.4.2024, 20:25 |