Я добавил свое полное рабочее решение.Благодаря многим людям здесь дают свои различные методы.Так что это для всех, кто может бороться.
Сначала давайте настроим стиль.
<style>
img {
max-width: 100%;
width: 100%;
min-width: 0;
min-height: 0;
}
</style>
добавление min-width: 0; | min-height: 0; кажется излишним, но с хромом он работает намного лучше, чем установка их на автоматический режим;
Поскольку он использует flexbox, мы не добавляем обычный ширина: 33,33%; , даже если есть 3 изображения.В flexbox это просто разнесет их далеко друг от друга в пределах 100% ширины.
Вот действительно важная часть, которую я нашел трудным путем.
Вы должны использовать width: 100% на изображениях или max-width:100%; в противном случае (в Chrome без добавления либо 100% ширины, либо максимальной ширины: 100%; он просто не будет сгибаться / сжиматься, когда вы свернете браузер для проверки его отзывчивости.)
Итак, чтобы сохранить каждое из 3 изображений в идеальном соотношении сторон, не забудьте включить каждое изображение в свой собственный контейнер div.В противном случае они сжимаются, но просто наклоняются друг к другу, как и они.
Как вы можете видеть, первое изображение даже обернуто в гиперссылку, но, поскольку оно находится внутри своего собственного div, оно будет уменьшаться и расти полностью на одном уровне с другими изображениями.Это позволяет сэкономить при использовании дополнительной разметки и сохранить добавление тега span, а затем сделать его гибким контейнером для гиперссылки.Я пробовал оба способа, это гораздо более простой метод.
Я использовал встроенные стили для контейнера flexbox. (вредная привычка.)
<div style="border: 2px solid red; margin: 0 auto; display: flex; justify-content: center;">
<div>
<a href=""><img src="flash-tooltip.png"></a>
</div>
<div>
<img src="html-tooltip.png">
</div>
<div>
<img src="portables-tooltip.png">
</div>
</div>
Не забудьте закрыть этот последний / div, это настоящий улов!
И вот как ямы сделали этоПротестировано во многих браузерах работает отлично.Даже на мобильных телефонах и планшетах.
Если вам не нравится flexbox?Вы можете сделать то же самое, используя обычные поплавки. Я включил тот же метод, что и выше, только на этот раз в float: version.