Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı
3
Cevap
445
Tıklama
0
Öne Çıkarma
Resmi çerçeveye sığdırma - yardım lütfen

L lucius-132 Konu Sahibi
6 yıl (166 mesaj)
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 >


Bu mesajda bahsedilenler: @ebilgic

M MOLİVER
6 yıl (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ı >


Bu mesajda bahsedilenler: @lucius-132

L lucius-132 Konu Sahibi
6 yıl (166 mesaj)
çok teşekkür ederim.




E ebilgic
6 yıl (255 mesaj)
Arkadaş yardımcı olmuş sanırım. Gerekirse beni yine etiketleyin ya da konumun altına yazın ilgilenirim.



DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.