Как да направите изображенията отзивчиви
Здравейте всички! Разбрахме какво е адаптивно оформление, мрежа и как да направим шрифтовете адаптивни. Сега нека да разгледамекак да адаптирате изображения.
Това всъщност е много проста тема и няма да ни отнеме много време.
За да направите вашите изображения гъвкави, просто добавете свойствотоmax-width=100%към тях.
Всичко! Сега нашето изображение няма да надхвърля родителския контейнер и ще се адаптира в зависимост от разделителната способност на екрана.
img, вграждане, обект, видео максимална ширина: 100%; >
Всичко е наред, но това работи само вIE7+Ако трябва да поддържатеIE6, тогава това свойство работи там в тази нотация:
Тези. вместоmax-widthнапишетеwidth.
Друг проблем, който може да срещнете, е лошото мащабиране на изображението вWindows. Да, това е в системата, не в браузъра. Ако се вгледате внимателно, можете да видите някои артефакти.
Решаването на този проблем заIEе лесно.
.logo фон: няма; филтър: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale"); >
Тези. свойствотоfilterни помага да решим този проблем.
И така, днес научихтеколко лесно е да направите изображения отзивчиви, какви проблеми може да срещнете, когато използвате този метод и как да ги разрешите. Благодаря за вниманието и успех!
Добавете ме като приятелVKontakte: http://vk.com/myrusakov. Ако искате да оцените мен и работата ми, напишете го в моята група: http://vk.com/rusakovmy.
Препоръчайте тази статия на вашите приятели:
Ако харесвате сайта, поставете връзка към него (във вашияна сайта, във форума, в контакт):
Тя изглежда така:
Коментари ( 2 ):
Решаването на този проблем за IE е лесно. И така, какво ще кажете за другите браузъри?