#html #css
#HTML #css
Вопрос:
Установка max-width и max-height на 100% для изображения делает то, что задумано, и масштабирует изображение в соответствии с его контейнером с сохранением пропорций. Тем не менее, мне нужно добиться того же, но с дополнительным контейнером, плотно прилегающим к изображению (чтобы иметь возможность размещать другие материалы относительно изображения).
Я ищу решения, отличные от JS, и семантика разметки не является проблемой, поскольку это для приложения. (таблицы будут в порядке). Также размеры изображения можно считать известными.
Еще один способ описать то, что я хочу: сделать так, чтобы изображение всегда помещалось внутри тела и отображало границу вокруг него (не используя тривиальное решение о наложении границы на само изображение)
Вот пример, показывающий проблему. Я придал изображению 0.5 непрозрачность, чтобы желтый контейнер просвечивал. Цель состоит в том, чтобы контейнер всегда имел тот же размер, что и изображение. Т. Е. изображение всегда будет иметь желтый оттенок, но никакие другие желтые области не должны быть видны. Примечание: я не пытаюсь добиться каких-либо эффектов окраски, это просто иллюстрация проблемы.
Комментарии:
1. у вас есть скриншот или диаграмма?
Ответ №1:
Попробуйте это, http://jsfiddle.net/xmarcos/K4dHr /
Обновление: http://jsfiddle.net/xmarcos/K4dHr/4/
Комментарии:
1. Отрицательный. Работает по ширине, но прокручивается по горизонтали, когда изображение выше, чем порт просмотра. Тем не менее, я начинаю признавать, что это лучшее, что можно сделать. Разочаровывает, однако, когда простая подгонка изображения работает так хорошо, что можно подумать, что возможна простая оболочка…
2. Хорошо, извините за придирчивость, но … при сжатии изображения ширина контейнера остается 100%. Это означает, что я не могу размещать материал относительно ширины изображения, что является обязательным требованием. Большое спасибо за попытку!
Ответ №2:
Здесь, похоже, это работает: http://jsfiddle.net/Wexcode/vzc4m/1 /
Вам не нужно иметь максимальную высоту вокруг вашего <div> , потому что она будет растягиваться до размеров его внутренних элементов, если вы установите его как display: inline-block . Принудительное <img> использование параметра «иметь display: block » гарантирует, что вокруг элемента внутри контейнера не будет добавлено никакого дополнительного пространства, если вы не укажете его (используя margin ).