CSS Dilinde CSS max-width Kullanımı

CSS'de max-width özelliği, bir elemanın genişliğinin belirli bir değeri asla aşmamasını sağlamak için kullanılır. Bu özellik, özellikle duyarlı web tasarımlarında, içeriğin farklı ekran boyutlarına uyum sağlaması ve taşma sorunlarını önlemesi açısından kritik bir rol oynar. Bir elemanın doğal genişliği ne olursa olsun, max-width tanımlanan değeri bir üst sınır olarak kabul eder ve elemanın genişliğinin bu sınırı geçmesine izin vermez. Bu sayede, elemanlar mevcut alanlarına dinamik olarak uyum sağlayabilirken, aşırı genişlemesi engellenir.

Sözdizimi

max-width özelliğinin temel sözdizimi aşağıdaki gibidir:

selector {
    max-width: value;
}

Detaylı Açıklama

Yukarıdaki sözdiziminde yer alan bileşenler ve value için kullanılabilecek değerler aşağıda açıklanmıştır:

selector: Bu, CSS kuralının uygulanacağı HTML elemanını veya eleman grubunu hedefleyen bir CSS seçicisidir. Örneğin, .container, img veya #main-content olabilir.
max-width: Uygulanacak CSS özelliğidir.
value: Elemanın genişliğinin aşamayacağı maksimum değeri belirler. Aşağıdaki değer tiplerini alabilir:
- length: Piksel (px), yüzde (%), em, rem, vw (viewport width) gibi mutlak veya göreceli uzunluk birimleri kullanılabilir. Örneğin, 600px, 80%, 50em.
- none: Bu, max-width özelliğinin varsayılan değeridir. Elemanın maksimum genişlik sınırı yoktur; genişliği doğal içeriğine veya tanımlanmış width özelliğine göre belirlenir.
- initial: Özelliği, tarayıcının varsayılan değerine ayarlar (genellikle none).
- inherit: Elemanın max-width değerini doğrudan ebeveyn elemanından miras almasını sağlar.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, max-width özelliğinin farklı senaryolarda nasıl kullanılabileceğini göstermektedir.

Örnek 1: Duyarlı Görsel Boyutlandırma

Bu örnek, bir görselin kapsayıcısının genişliğini aşmamasını ve böylece duyarlı bir şekilde boyutlanmasını sağlar.

/* CSS Kodu */
.image-container {
    width: 100%; /* Kapsayıcı tam genişlikte */
    max-width: 800px; /* Kapsayıcının maksimum genişliği */
    margin: 0 auto; /* Ortalamak için */
}

.image-container img {
    max-width: 100%; /* Resim kapsayıcısının genişliğini aşmaz */
    height: auto; /* Oranları korur */
    display: block; /* Alt boşluğu kaldırmak için */
}

Yukarıdaki CSS, .image-container sınıfına sahip bir

elemanının maksimum 800px genişliğe sahip olmasını sağlar. İçindeki etiketi ise, kapsayıcısının genişliğinin %100'ünü geçmeyecek şekilde ayarlanmıştır. Bu, ekran boyutu küçüldüğünde resmin otomatik olarak küçülmesini, ancak geniş ekranlarda 800px'ten daha geniş olmamasını garanti eder.

Örnek 2: İçerik Kapsayıcısını Sınırlama

Bir web sayfasının ana içerik alanının çok genişlemesini engelleyerek okunabilirliği artırmak için kullanılır.



    Bu, sayfanın ana içeriğidir. Geniş ekranlarda bile belirli bir genişliği aşmayarak okunabilirliği artırır.
    ... diğer içerikler ...

/* CSS Kodu */
.main-content {
    width: 90%; /* Kapsayıcı %90 genişlikte */
    max-width: 1200px; /* Maksimum 1200 piksel genişlik */
    margin: 0 auto; /* Ortalamak için */
    padding: 20px;
    background-color: #f0f0f0;
}

Bu örnekte, .main-content sınıfına sahip eleman, ekran genişliğinin %90'ını kaplar, ancak asla 1200px'i aşmaz. Bu, içeriğin geniş ekranlarda bile çok yayılmamasını sağlayarak kullanıcı için daha rahat bir okuma deneyimi sunar.

Örnek 3: Form Elemanları İçin Kullanım

Geniş form alanlarının küçük ekranlarda taşmasını önlerken, büyük ekranlarda da aşırı genişlemesini engeller.



    Adınız:
    

    Mesajınız:

/* CSS Kodu */
input[type="text"],
textarea {
    width: 100%; /* Eleman kapsayıcısının genişliğini doldurur */
    max-width: 400px; /* Maksimum 400 piksel genişlik */
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Padding ve border'ı genişliğe dahil eder */
}

Burada, metin giriş alanları ve </code>, kapsayıcılarının genişliğini dolduracak şekilde ayarlanmıştır, ancak maksimum <code>400px</code> genişliğe sahiptirler. Bu, form elemanlarının hem küçük hem de büyük ekranlarda uygun boyutlarda görünmesini sağlar.</p><br> <h3>Önemli Notlar</h3><br> <ul> <li><p><strong><code>width</code> ve <code>max-width</code> Farkı</strong>: Bir elemana hem <code>width</code> hem de <code>max-width</code> tanımlandığında, <code>max-width</code> daha yüksek önceliğe sahiptir. Eğer <code>width</code> değeri <code>max-width</code> değerinden büyükse, eleman <code>max-width</code> değerini kullanır. Bu, elemanların esnekliğini korurken aşırı genişlemesini engellemek için idealdir.</p></li> <li><p><strong>Duyarlı Tasarımın Temeli</strong>: <code>max-width: 100%;</code>, görsellerin, videoların ve diğer medya öğelerinin duyarlı web tasarımlarında kapsayıcılarını aşmamasını sağlamak için yaygın olarak kullanılan temel bir tekniktir.</p></li> <li><p><strong><code>min-width</code> ile Kombinasyon</strong>: <code>max-width</code>, <code>min-width</code> (minimum genişlik) ile birlikte kullanılarak bir elemanın genişliği için bir aralık tanımlanabilir. Örneğin, <code>min-width: 300px; max-width: 800px;</code> elemanın genişliğinin 300 pikselden az, 800 pikselden fazla olmamasını sağlar.</p></li> <li><p><strong>Taşma Sorunlarını Önleme</strong>: Metin içeriği veya diğer elemanlar bir kapsayıcıdan taştığında ortaya çıkan yatay kaydırma çubukları gibi sorunları önlemede etkilidir.</p></li> <li><p><strong><code>box-sizing</code> Etkileşimi</strong>: <code>max-width</code> özelliğini kullanırken <code>box-sizing: border-box;</code> özelliğini de eklemek, padding ve border değerlerinin elemanın toplam genişliğine dahil edilmesini sağlayarak daha öngörülebilir bir düzen elde etmenize yardımcı olur.</p></li> </ul> <div class="post-hakkinda"> <div style="text-align:center;" class="yayin-tarihi"> Yayınlanma Tarihi: 2025-10-18 14:00:43 </div> </div> </div> </div> </div> </div>  <div class="yonlendirme-container"> <a href="posts/html-dilinde-html-classes-kullanimi-451" class="yonlendirme-karti prev-karti"> <img src="https://softmush.com/api/images/post_banner/html-dilinde-html-classes-kullanimi-68f3654030359.webp" alt="HTML Dilinde HTML Classes Kullanımı"> <div class="yonlendirme-karti-icerik"> <span><i class='bx bx-left-arrow-alt'></i> Önceki Haber</span> <h3>HTML Dilinde HTML Classes Kullanımı</h3> <div class="kategori-etiketi">HTML Makaleleri</div> </div> </a> <a href="posts/sql-dilinde-wildcards-joker-karakterler-kullanimi-453" class="yonlendirme-karti next-karti"> <div class="yonlendirme-karti-icerik"> <span>Sonraki Haber <i class='bx bx-right-arrow-alt'></i></span> <h3>SQL Dilinde Wildcards (Joker Karakterler) Kullanımı</h3> <div class="kategori-etiketi">SQL Makaleleri</div> </div> <img src="https://softmush.com/api/images/post_banner/sql-dilinde-wildcards-joker-karakterler-kullanimi-68f38f776ac1e.webp" alt="SQL Dilinde Wildcards (Joker Karakterler) Kullanımı"> </a> </div> <div class="comments" id="yorumlar">  <div class="yorum-yap"> <p class="yorum-baslik">Yorum yap</p> <div style="z-index:10;" class="alert alert-not">Yorum yapabilmek için <a style="text-decoration:none; color:#00997b;" href="login">giriş</a> yapmalısınız.</div> </div>  <div class="yorumlar"> <p class="yorum-baslik">Yorumlar</p> <div style="z-index:10; display:;" class='alert alert-not'>Bu yazı hakkında henüz yorum yapılmamıştır.</div> </div> </div> <footer class="footer"> <div class="footer__addr"> <h1 class="footer__logo"><img class="site-logo" src="../images/avatar_banner/68ecc3cd01872.png" alt="logo"></h1> </div> <ul class="footer__nav"> <li class="nav__item"> <h2 class="nav__title">Kategoriler</h2> <ul class="nav__ul"> <li> <a href="kategori/bilim">Bilim Makaleleri</a> </li> <li> <a href="kategori/para-kazanma">Kazanç Makaleleri</a> </li> <li> <a href="kategori/html">HTML Makaleleri</a> </li> <li> <a href="kategori/css">CSS Makaleleri</a> </li> </ul> </li> <li class="nav__item"> <h2 class="nav__title">Sayfalar</h2> <ul class="nav__ul"> <li> <a href="hakkimizda">Hakkımızda</a> </li> <li> <a href="reklam">Reklam</a> </li> <li> <a href="#">Site Haritası</a> </li> </ul> </li> <li class="nav__item"> <h2 class="nav__title">Hukuk & Yasa</h2> <ul class="nav__ul"> <li> <a href="gizlilik-politikasi">Gizlilik Politikası</a> </li> <li> <a href="cerezler">Çerez Politikası</a> </li> <li> <a href="kullanici-sozlesmesi">Kullanıcı Sözleşmesi</a> </li> </ul> </li> <li class="nav__item"> <h2 class="nav__title">İletişim</h2> <ul class="nav__ul"> <li> <a href="iletisim">İletişim Formu</a> </li> <li> <a href="mailto:yonetici@gmail.com">Mail Gönder</a> </li> </ul> </li> </ul> </footer> <div class="legal"> <p>2025 © Tüm Hakları Saklıdır.</p> </div> <div id="ilginiCekebilirKutusu" class="ilgini-cekebilir-kutusu"> <span id="kapatDugmesi" class="kapat-dugmesi" title="Kapat">×</span> <a href="https://softmush.com/posts/css-dilinde-yazi-tiplerini-fonts-yonetimi-415" title="CSS Dilinde Yazı Tiplerini (Fonts) Yönetimi"> <img src="https://softmush.com/api/images/post_banner/css-dilinde-yazi-tiplerini-fonts-yonetimi-68f140e4ae7af.webp" alt="CSS Dilinde Yazı Tiplerini (Fonts) Yönetimi"> <div class="ilgini-cekebilir-baslik"> <span>Bu ilginizi çekebilir</span> <h4>CSS Dilinde Yazı Tiplerini (Fonts) Yönetimi</h4> <p>Cascading Style Sheets (CSS), web sayfalarının görsel sunumunu kontrol eden temel bir...</p> </div> </a> </div> </body> <script src="settings/js/java.js"></script> <script> // const yorums = document.querySelectorAll(".yorumlar"); // yorums.forEach(el => { // el.querySelector(".gosters").addEventListener("click", (event) => { // event.preventDefault(); // el.querySelector(".cevapla").classList.toggle("goster"); // }) // }); document.addEventListener("DOMContentLoaded", function () { var gostersButtons = document.getElementsByClassName("gosters"); for (var i = 0; i < gostersButtons.length; i++) { gostersButtons[i].addEventListener("click", toggleReplyForm); } function toggleReplyForm() { var cevaplaDiv = this.nextElementSibling; if (cevaplaDiv.style.display === "none") { cevaplaDiv.style.display = "block"; } else { cevaplaDiv.style.display = "none"; } } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const kutu = document.getElementById('ilginiCekebilirKutusu'); const yaziAlani = document.querySelector('.post-yazilari'); // Yazı içeriğinin olduğu div if (!kutu || !yaziAlani) { return; // Gerekli elemanlar yoksa scripti çalıştırma } const kapatDugmesi = document.getElementById('kapatDugmesi'); let kutuGosterildi = false; function scrollKontrol() { // Yazı alanının alt kenarının viewport'a olan mesafesini al const yaziAlaniRect = yaziAlani.getBoundingClientRect(); const tetiklemeNoktasi = yaziAlaniRect.bottom; // Yazının altı, ekranın görünür alanına girdiğinde kutuyu göster if (tetiklemeNoktasi <= window.innerHeight && !kutuGosterildi) { kutu.classList.add('goster'); kutuGosterildi = true; // Tekrar tetiklenmesini engelle window.removeEventListener('scroll', scrollKontrol); // Performans için listener'ı kaldır } } kapatDugmesi.addEventListener('click', function(event) { event.preventDefault(); // a etiketinin linke gitmesini engelle kutu.style.display = 'none'; // Kapat düğmesine basınca tamamen gizle }); window.addEventListener('scroll', scrollKontrol); }); </script> <script> document.getElementById('likeButton').addEventListener('click', function () { var postId = this.getAttribute('data-post-id'); var xhr = new XMLHttpRequest(); xhr.open('POST', 'class/like.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = xhr.responseText; console.log(response); // İstenilen işlemleri gerçekleştirin } else { // Hata durumunda işlemler yapın } } }; xhr.send('post_id=' + postId); }); </script> <script> function updateComments() { window.location.reload(); var pageLink = window.location.href; var newPageLink = pageLink + '#yorumlar'; window.location.href = newPageLink; } document.getElementById('yorumForm').addEventListener('submit', function (event) { event.preventDefault(); // Formun varsayılan gönderme davranışını engelle var form = document.getElementById('yorumForm'); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', 'class/class.php', true); xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = xhr.responseText; console.log(response); updateComments(); // Yeni yorumları güncellemek için işlevi çağır } else { // Hata durumunda işlemler yapın } } }; xhr.send(formData); }); </script> </html>

Çerezler