1

Привет всем, подскажите, пожалуйста, что я делаю не так: хочу сделать так, чтобы на экране было два картинки на весь экран. Наводишь на картинку, и она меняется, показывая какую-то информацию. Картинки должны быть ссылками. Я делаю два блока, в них запихиваю два изображения, но если указывать изображение в css, то я его не могу растянуть на весь экран, вот мой код:

css:

 body {
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
}

#container {
position: relative;
width: 100%;
}

#left {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
}

#right {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
}

.img {
    position:fixed;

 display: inline-block;
 min-width:50%;
min-height:100%;
background: transparent url(http://htmlbook.ru/example/images/sun1.png) ; /* Путь к файлу с исходным рисунком  */
}



.img:hover {
width:50px;
height:10px;
background: url(http://htmlbook.ru/example/images/sun2.png) no-repeat; /* Путь к файлу с исходным рисунком  */
 }

html:

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
    <title>Demo</title>

   <link href="style.css" rel="stylesheet" type="text/css" />

  </head>
<body>

 <div id="container">
  <div id="left">

    <a class="img" href="sample.html" class="rollover"></a>

  </div>

 <div id="right">

  <a class="img" href="sample.html"><img src="http://htmlbook.ru/example/images/sun2.png" id="bg" alt="" /></a>

  </div>
 </div>

 </body>
 </html>

Результат (слева не могу растянуть картину): введите сюда описание изображения

2
  • Попробуй средствами Javascript 28 июл 2015 в 21:57
  • естественно, background не будет растягивать блок, может просто тэг img использовать ?
    – zb'
    28 июл 2015 в 22:32

2 ответа 2

3

Если я правильно понял, нужно что бы изображение указанное в background-image растягивалось на ширину и высоту контейнера. Для этого достаточно указать background-size: 100% 100%. Если указать только одно значение 100%, то оно будет действовать только на ширину, при этом высота будет равна auto, что позволит сохранить пропорции.

Пример

1
  • Спасибо, выручили
    – ed8009
    28 июл 2015 в 22:48
0

Если делать с помощью JavaScript

Сорри, если используешь jQuery ;)

HTML:

...
<div id="left">
  <a href="sample.html">
    <img id="img1" src="pic_1.jpg" />
  </a>
</div>
<div id="right">
  <a href="sample.html">
    <img id="img2" src="pic_2.jpg" />
  </a>
</div>
...

CSS (добавить немного):

#right, #left{
  height: 100%; /*Во всю высоту*/
  overflow: hidden;
}
#container img{
  vertical-align: top;
  display: block;

  /* << Можно убрать (ШИРИНА и ВЫСОТА до работы скрипта) */
  width: 100%;
  height: 100%;
  /* >> Можно убрать */
}

JavaScript (Добавил в HTML после блока #container)

// Инициализация пикч
var
img_1 = document.getElementById( 'img1' ),
img_2 = document.getElementById( 'img2' );

// Минимальные значение до которых может сузиться пикча.
var
min_width = 500,
min_height = 400;

// Размеры пикчи по умолчаниею
var
def_width = 1200,
def_height = 800;

function resize(){
  var 
  w = innerWidth / 2, // Ширина экрана ПОПОЛАМ! (не кроссбраузерно)
  h = innerHeight; // Высота экрана (не кроссбраузерно)

  // Получение новых значений
  var
  new_width = w > min_width ? w : min_width, // Новая ширина пикчи
  new_height = h > min_height ? h : min_height , // Новая высота

  // Считаем
  var
  ww = new_width,
  hh = new_width / ( def_width / 100 ) * ( def_height / 100 );

  var 
  marginTop = ( h - new_height ) / -2,
  marginLeft = 0;

  if( hh < new_height ){
    hh = new_height;
    ww = new_height / ( def_height / 100 ) * ( def_width / 100 );
    marginTop = 0;
    marginLeft = ( ww - new_width ) / -2;
  }

  // Присваиваем
  img_1.style.width = ww + 'px';
  img_1.style.height = hh + 'px';
  img_1.style.marginTop = marginTop + 'px';
  img_1.style.marginLeft = marginLeft + 'px';

  img_2.style.width = ww + 'px';
  img_2.style.height = hh + 'px';
  img_2.style.marginTop = marginTop + 'px';
  img_2.style.marginLeft = marginLeft + 'px';
};

window.onresize = resize;
resize();

Двигаешь, шевелиши экран как хочешь, они будут вставать ровно по ценру. Если ошибка какая нибудь, отпиши. Я со своего кода скатывал. Этот не чекал.

2
  • Зачем везде пихать js?
    – Qwertiy
    28 июл 2015 в 23:50
  • 1
    Сорри, там сверху лучше вариант для этого предложили 29 июл 2015 в 0:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.