Şimdi Ara

Resmi çerçeveye sığdırma - yardım lütfen

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
3 Misafir - 3 Masaüstü
5 sn
4
Cevap
0
Favori
2.797
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri
  • Son Yorum 6 yıl
  • Cevaplayan Üyeler 3
  • Konu Sahibinin Yazdıkları 2
  • Ortalama Mesaj Aralığı 10 saat 55 dakika
  • Son 1 Saatteki Mesajlar 1
  • Haberdar Edildiklerim (Alıntılar) 2
  • Konuya En Çok Yazanlar
  • lucius-132 (2 mesaj) ebilgic (1 mesaj) MOLİVER (1 mesaj)
  • Konuya Yazanların Platform Dağılımı
  • Mobil (1 mesaj)
  • @
0 oy
Öne Çıkar
Tüm Forumlar >> Web Tasarım - Programlama >> Tasarım ve grafik >> Web Tasarım ve Hazır Kodlar >> Resmi çerçeveye sığdırma - yardım lütfen
Sayfaya Git:
Sayfa:
1
Giriş
Mesaj
  • Teğmen
    166 Mesaj
    Konu Sahibine Özel

    Merhaba. Bir web sitesi hazırlıyoruz. Sitede kurum olarak yapılan etkinlikleri haber şeklinde yayınlayacağız. Blog sitesindeki haberler gibi. ( iki sütun halinde col-lg-8 ve col-lg-4 bölümlemesiyle) Web tasarımı ile ilgili çok fazla bilgim yok. O yüzden yardımınıza ihtiyacım var. Öncelikle ne istediğimi anlatmaya çalışayım: Haberlerin metninden önce resim koyacağız. bu resmi bir çerçeve içine (örneğin yüksekiği 300px sabit olacak, genişlik de 100% şeklinde-col-lg-8'e sığacak şekilde) koyacağız. img src koduyla verdiğimiz resim büyük bile olsa 300px yükseklik içinde görünecek. bu iki şekilde olabilir. 1. resmi kırpmadan sıkıştırma aspect ratio bozulabilir. 2. resmi kırparak, bozulma olmadan. her iki şekil de olabilir. nasıl yapacağımı kafam almadı bir türlü. yardımcı olursanız sevinirim.

            <div class="row"> 

    <!-- Blog Post Content Column -->

    <div class="col-md-8">

    <!-- Blog Post -->

    <!-- Title -->
    <h2>Haber Başlığı</h2>

    <hr>

    <!-- Date/Time -->
    <p><span class="glyphicon glyphicon-time"></span> Posted on August 24, 2013 at 9:00 PM</p>

    <hr>

    <!-- Preview Image -->

    <img align="middle" src="images/blogpicture1.jpg" alt="#">


    <hr>

    <!-- Post Content -->
    <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>

    <hr>

    </div>

    <!-- Blog Sidebar Widgets Column -->
    <div class="col-md-4" style="margin-top: 45px;">

    <!-- Blog Categories Well -->
    <div class="well">
    <h4>Diğer Haberler</h4>
    <div class="row">
    <div class="col-md-12">
    <ul class="list-unstyled">
    <li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=#" data-href="#">Category Name şksdflsndlf sdfks nfss dlfjnn sdlkfd</a></li>
    <br>
    <li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=#" data-href="#">Category Name</a></li>
    <br>
    <li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=#" data-href="#">Category Name</a></li>
    <br>
    <li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=#" data-href="#">Category Name</a></li>
    <br>
    </ul>
    </div>
    </div>
    <!-- /.row -->
    </div>

    </div>

    </div>


    NOT: Bootstrap 3.3.5 kullanan bir şablon düzenleyerek uyarlamaya çalışıyoruz.



    < Bu mesaj bu kişi tarafından değiştirildi lucius-132 -- 26 Haziran 2015; 9:07:35 >



    |
    |
    Bahsedilenler: ebilgic




  • Yüzbaşı
    696 Mesaj

    Bootstrap için benim denediğim yöntem, her boyut için (lg,sm,md,xs) resime bir class atıyarak bunu media ile farklı çözünürlüklerde şekli şemali çok kaymadan farklı boyutlar atıyarak yapıyordum.Ama siz nasıl resmin genişliğini sabitlerim diye sorduğunuz için,

    <img class="boyut" src="resim.png" />

    Kodumuzu atadıktan sonra,

    .boyut { width:100%; height:300px; }

    Dedikten sonra artık resimleriniz ekran boyutuna yani lg ızgarasının boyutuna bağlı olarak genişleyecek ama yüksekliği sınırladığımız için resim ne kadar genişlerse genişlesin yükseklik aynı kalacak.Tabii bu resmin görüntüsünü bozmayacak mı? Tabiki bozacak, bu durumda da size önerdiğim media etiketi devreye giriyor.

    < Bu ileti mobil sürüm kullanılarak atıldı >
    |
    |
    lucius-132 kullanıcısının, bahsedilen mesajını gör
  • Teğmen
    166 Mesaj
    Konu Sahibine Özel
    çok teşekkür ederim.
  • Yüzbaşı
    255 Mesaj
    Arkadaş yardımcı olmuş sanırım. Gerekirse beni yine etiketleyin ya da konumun altına yazın ilgilenirim.
    |
    |
Sayfaya Git:
Sayfa:
1
Reklamlar
vp satın al
valorant points
LOL RP Satın Al - LOL RP Yetkili Satış Sitesi
bankacılar
Bu sayfanın
Mobil sürümü
Mini Sürümü

BR2
0,313
1.2.165

Reklamlar
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.