overflow
- visible - при переповненні вміст буде відображатися за межами блоку (за замовчуванням)
- hidden - при переповненні ховає частину зображення що виходить за рамку
- scroll - контент, що переповнює блок, буде прихований. Для перегляду прихованого контенту з'являться вертикальний і горизонтальний скролбари.
- auto - при значенні auto показуються тільки ті скроллбари, які дійсно необхідні.
HTML
<div class="thumb"> <img src="https://images.pexels.com/photos/33492/cat-red-cute-mackerel.jpg?auto=compress&cs=tinysrgb&h=480&w=640" alt=""> </div>
CSS
* { box-sizing: border-box; } img { display: block; max-width: 100%; } .thumb { border: 10px solid green; border-radius: 50px; width: 480px; overflow: hidden; }
- overflow-x
- overflow-y
контролюють переповнення тільки у відповідній площині.