Question

Помогите.

Адаптировать изображения.Чтоб при изменении разрешения изображения уменьшались и не обрезались.

Резиновый этот код сделать прошу.

В будущем буду знать как делать.

HTML

<div class="wrapper">
 <div class="table">
 <div class="row">
 <div class="col igrinapc">1</div>
     <div class="col igrinaxbox">2</div>
     <div class="col igrinaps">3</div>
 </div>
     </div>
    </div>

CSS

.wrapper{
   width:100%;   
}
 
.table{
   display:table;   
   width:100%;
}
 
.row{
   display:table-row;   
}
 
.col{
    display:table-cell;
    border:1px solid black;
}
 
.igrinapc{
   width:50%;
     background: url(http://test1siegmein.ucoz.ru/images/igrinapk.jpg) no-repeat;
     height: 600px;
}
 
.igrinaxbox{
   width:40%;
     background: url(http://test1siegmein.ucoz.ru/images/igrinaxbox.jpg) no-repeat;
     height: 600px;
     }
     
     .igrinaps{
   width:50%;
     background: url(http://test1siegmein.ucoz.ru/images/irinaps.jpg) no-repeat;
     height: 600px;
     }

Comments

Вам необходимо картинку  background делать по ширине экрана? попробуйте background-size: 100%; или почитайте тут  http://htmlbook.ru/faq/kak-rastyanut-fon-na-vsyu-shirinu-okna

Answer 1

 

.igrinaxbox {
background: url("http://test1siegmein.ucoz.ru/images/igrinaxbox.jpg") 0% 0%/100% no-repeat transparent;
height: 600px;
width: 40%;
}

Остальные картинки по аналогии.

Comments

0% 0%/100%  - что делают эти элементы?

---

И это no-repeat transparent;

---

0% 0%/100% http://htmlbook.ru/css/background-position

---

no-repeat , не повторять картинку по горизонтали и вертикали.
transparent, фон картинки не имеет цвета, за картинкой как бы есть подложка, на которой картинка лежит, не путать с прозрачностью.

---

Резиновая высота как сделать?
При уменьшении высоты окна браузера изображения уходят под ячейки помогите пожалуйста.
HTML

<div class="wrapper">
 <div class="table">
 <div class="row">
 <div class="col igrinapc" align="center"><a href="http://test1siegmein.ucoz.ru/load/igry_na_pc/1">Игры на PC</a></div>
 <div class="col igrinaxbox" align="center"><a href="http://test1siegmein.ucoz.ru/load/igry_na_pc/1">Игры на PC</a></div>
 <div class="col igrinaps" align="center"><a href="http://test1siegmein.ucoz.ru/load/igry_na_pc/1">Игры на PC</a></div>
 </div>
 </div>
 </div>
 
 <div class="wrapper">
 <div class="table">
 <div class="row">
 <div class="col content" align="center">$BODY$</div>
 </div>
 </div>
 </div>

CSS

.wrapper{
 width:100%;
}
 
.table{
 display:table;
 width:100%;
 height: 23%;
}
 
.row{
 display:table-row;
}
 
.col{
 display:table-cell;
 border:1px solid black;
}
 
.igrinapc{
 background: url("http://test1siegmein.ucoz.ru/images/igrinapk.jpg") 0% 0%/100% no-repeat transparent;
}
 
.igrinaxbox{
 background: url("http://test1siegmein.ucoz.ru/images/igrinaxbox.jpg") 0% 0%/100% no-repeat transparent;

 }
 
 .igrinaps{
 background: url("http://test1siegmein.ucoz.ru/images/irinaps.jpg") 0% 0%/100% no-repeat transparent;

 }
Адрес сайта http://test1siegmein.ucoz.ru/load/igry_na_pc/1