Basit Bir Css&Html

Merhaba bu kodda tarayıcılarda ve telefonlarda yarı yarıya ekranı kaplayacak ve responsive olacak şekilde nasıl ayarlayabilirim? Kod bilgim kısıtlı rica etsem yardım edebilirmisiniz.
































cengizhandilber boyutları yüzde olarak verin işinizi görür. Her cihazın ekranına göre yüzdelik dilim alacağından bir sıkıntı oluşturmaz. Örn : style="width:50%;" yada width="50%" şeklinde.

mkarson Hocam dediğiniz gibi yaptığımda resimin biri diğer tarafta diğeri başka tarafta bozuk bir yapıda çıktı.( Yüzde 50 değerini verdim aşağıdaki gibi)






























50% değeri resime değil "td" için verilecek.
Resimlerede max genişlik eklenecek, max genişlik alandan dışarı taşmamalı, buna görede yükseklik auto olmalı...
https://jsfiddle.net/stekmil/wdp541ug/

cengizhandilber

































kolay gelsin

Hocam çok teşekkürler verdiğiniz şekilde tam oluyor tarayıcıda ancak telefonda alt tarafı boşluk oluyor responsive özelliği için şöyle bir kod buldum
@media only screen and (max-width:1230px) and (min-width:990px){
img{width:50%;height:auto}

Bunu nasıl düzenleyip ekleyebilirim sizin verdiğiniz kod ile

Altında boşluk oluşur çünkü resimler o derecede küçülmekte ki, ekran yüksekliği resim boyutlarını aşar.

O tür kodlar bu soruna çözüm olmayacağı gibi resimlerin genişlik ve yükseklikleriyle oynanarak çözülemez.

Responsive tasarımdan söz ettiğimiz an, TABLE kullanılmamalı... Ama illa table kullanılacak ve resimler yanyana duracak ise, resimlerin ebadına göre altında boşluk oluşması kaçınılmazdır... Bir resimin yüksekliğini, genişliği sabit tutarak arttırmak, resimleri kapı gibi aşağı doğru uzatır ve görüntü bozulur, görüntü bozulmasın altda boşluk oluşmasın dersek, bu durumda genişliği arttıracağımız için, resimler bu seferde ekranın genişliğinden taşacaktır...

Bir başka yol ise, resimlerin dışına bir div ekleyip, o dive sabit bir yükseklik vermek, resimleri ortalamak ve taşan noktaları gizlemektir-overflow:hidden... veya resim yerine tagın background özelliğinden yararlanıp, ortalamak ve yine divin yüksekliğini sabit tutmaktır-tabi cep telefonu, tablet vb içinde ayrı, ayrı yükseklik belirtilmeli...
Neyse, şimdilik sorun, sanırım bu değil...

DIV kullanımlı, cep telefonunda 1 col, diğerlerinde 2 col
Tabi etiketinde bir yere şu eklenmeli...

CSS ve HTML

https://jsfiddle.net/stekmil/1k1ay2t8/1/

Tüm arkadaşlara çok teşekkür ediyorum. Güven hocam sağolsun sorunu çok güzel bir şekilde çözdü :)