[X] Помощник

[pozitron123 Topic Starter]

Приветствую всех форумчан.

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

[ShowPrint]

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

Пример к первому варианту:

<img src="..." alt="..." title"..." style="width:20%;max-width:250px">

Ко второму:

CSS:
.imgStyle{width:20%;max-width:250px}

HTML:
<img src="..." alt="..." title="..." class="imgStyle">

Сообщение отредактировал ShowPrint - 26.1.2017, 20:27

[pozitron123 Topic Starter]

если все картинки разные по размеру, то можно в стилях кода, если все одинаковые, или существует повторяемость, то лучше через 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]

это в коде картинки как я понимаю?

Абсолютно верно

И все картинки автоматом будут подстраиваться?

Да, все картинки у которых указан класс imgStyle

Вы всё правильно поняли, что ещё на пальцах объяснить? "На пальцах" - это на конкретном примере.
За ширину отвечают css-параметр width, устанавливать его лучше в процентах от того блока в котором картинка размещена - так она получается "резиновой"...

max-width (не обязательно, но я устанавливаю) - прописывается для того, чтоб картинка не превышала своих фактических размеров. По сути max-width равен физической ширине картинки, устанавливаю такое ограничение я потому что при увеличении больше оригинала сильно снижается качество картинки, и на тот случай чтоб не переделывать код когда будут выпускать мониторы с разрешением 100000px по ширине - она всё равно останется оригинального размера, правда мелкая, но качества не потеряет.

[pozitron123 Topic Starter]

Вы всё правильно поняли, что ещё на пальцах объяснить?

 

Не понятно это нужно в сам блок прописывать? Или есть какие то общие параметры для всех картинок, не помню.

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

CSS:
.imgStyle{width:20%;max-width:250px}

 

[pozitron123 Topic Starter]

Вот что прописано при иследование элемента:

img {
vertical-align: baseline;

А вот что прописано где картинки нормально отображаются. Может в тот код вставить этот код? Как вы думаете?
 

img {
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
border: 0;

-ms-interpolation-mode: bicubic;

[ShowPrint]

pozitron123,

"На пальцах" - это на конкретном примере.

"Конкретный пример", это не два куска текста, а адрес страницы с формулировкой какие конкретно 

Картинки по ширине не вписываются в блок шаблона вылезают дальше

По тому что вы написали я, к сожалению, ничего подсказать не могу.

[pozitron123 Topic Starter]

Конкретный пример

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

Извиняюсь за свое хреновое объяснение, ниже код с сайта где картинки отображаются нормально. Можно ли его вставить в код шаблона на денвере где картинки отображаются некорректно?

А вот что прописано где картинки нормально отображаются. Может в тот код вставить этот код? Как вы думаете?

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]

вы меня хоть поняли что я имею ввиду?

Да понял я, понял... Только по куску css я к сожалению ничего не могу подсказать... Стили это только часть параметров, их применение зависит от того ка именно элементы вписаны в html и страницу в целом... При работе в локалке, не видя всего кода страницы, помочь не могу.

Может в тот код вставить этот код?

Попробуйте и посмотрите на результат, только не забывайте сохранить текущую версию, чтоб её можно было восстановить.
Я в таких случаях вообще делаю отладку кода не в файлах, а через "инструменты разработчика", а когда добьюсь нужного мне результата переношу его в нужное место.

За ширину отвечают css-параметр width, устанавливать его лучше в процентах от того блока в котором картинка размещена - так она получается "резиновой"...   max-width (не обязательно, но я устанавливаю) - прописывается для того, чтоб картинка не превышала своих фактических размеров

"Играйте" в  локалке с этими параметрами для элемента и смотрите на результат

[pozitron123 Topic Starter]

не видя всего кода страницы

Как мне показать, скопировать вам код?