თვისება max-width

თვისება max-width ადგენს ელემენტის მაქსიმალურ სიგანეს. თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ზომის ერთეული ან საკვანძო სიტყვა none, რაც ნიშნავს მნიშვნელობის არარსებობას.

როგორც წესი, თვისება ენიჭება ელემენტს მცურავი სიგანით (სიგანე მითითებულია პროცენტებში ან საერთოდ არაა მითითებული, და ელემენტი სიგანეში ფართოვდება მისი შიგთავსით). თუ ელემენტის სიგანე მითითებულია პროცენტებში - ბრაუზერის ფანჯრის გაფართოებისას მისი სიგანე გაიზრდება, სანამ არ მიაღწევს max-width-ის მნიშვნელობას.

სინტაქსი

სელექტორი {
	max-width: მნიშვნელობა;
}

მაგალითი

ამ მაგალითში სიგანე წარმოადგენს პროცენტს მშობელი ელემენტის სიგანიდან. გაწიეთ ბრაუზერის ფანჯარა სიგანეში და კონტეინერიც გაფართოვდება, რათა მოერგოს ბრაუზერის ფანჯრის სიგანეს. თუმცა, ის გაფართოვდება მხოლოდ იმ სიდიდემდე, რომელიც განსაზღვრულია max-width-ში, ეს არის 900px. როგორც კი კონტეინერი მიაღწევს ამ სიგანეს - ის შეწყვეტს გაფართოებას:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	height: 300px;
	border: 1px solid black;
}

მაგალითი

ამ მაგალითში კონტეინერის სიგანე შეზღუდულია ორივე მხრიდან: ის ვერ გახდება 900px-ზე მეტი და 400px-ზე ნაკლები:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

ასევე იხილეთ

თვისება min-width,
რომელიც ადგენს ელემენტის მინიმალურ სიგანეს
თვისება max-height,
რომელიც ადგენს ელემენტის მაქსიმალურ სიმაღლეს
თვისება min-height,
რომელიც ადგენს ელემენტის მინიმალურ სიმაღლეს