Нажатие изображения на контейнер страницы

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

Мне также понравится, если изображение находится в фоновом режиме, поэтому, если окно браузера мало по ширине, оно просто будет закрывать изображение.

Вот несколько сайтов, которые имеют это:

http://cpanel.com/products/

В CPanel вы можете увидеть IPad на этой странице, только наполовину отображается, когда окно браузера меньше, чем изображение.

Другой сайт с этим эффектом является Doteasy.com вот URL:

http://www.doteasy.com/

Если вы прокрутите вниз до середины своей страницы вы увидите раздел строитель сайта, который включает в себя скриншот программного обеспечения , Их страница имеет ширину 980 пикселей, и вы можете видеть, что скриншот находится на полпути за пределами обертки страницы.

Изображение должно быть 552px widde на высоте 315px.

.container { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background-color: yellow; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    height: 508px; 
 
    background-color: blue; 
 
} 
 

 
.image { 
 
    width: 552px; 
 
    height: 315px; 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Site Example</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content=""> 
 
    <meta name="keywords" content=""> 
 
</head> 
 
<body> 
 
    <section> 
 
     <h1>This is the Section</h1> 
 
     <div class="container"> 
 
      <div class="image">This would be the image.</div> 
 
     </div> 
 
    </section> 
 

 
</body> 
 
</html>

Я надеюсь, что вы, ребята, можете помочь!

Спасибо.

источник

2016-08-18 Richard Rodgers

Вы можете расположить абсолютно по отношению к контейнеру, как так:

Добавить position: relative; в контейнер
Добавить абсолютное позиционирование изображения position: absolute; top: 0; right: -276px; (правое значение составляет половину ширины изображения)
overflow-x: hidden на контейнере остановит лишнюю половину изображения от видимости.

section { 
 
    width: 100%; 
 
    height: 508px; 
 
    background-color: blue; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 960px; 
 
    height: 400px; 
 
    margin: 0 auto; 
 
    background-color: green; 
 
    overflow-x: hidden; 
 
} 
 

 
.image { 
 
    position: absolute; 
 
    top: 0; 
 
    right: -276px; 
 
    width: 552px; 
 
    height: 315px; 
 
    background-color: red; 
 
}

<section> 
 
    <h1>This is the Section</h1> 
 
    <div class="container"> 
 
    This is the container 
 
    <div class="image">This would be the image.</div> 
 
    </div> 
 
</section>

источник

2016-08-18 16:25:15 DBS

Эй человек, спасибо! Как разместить изображение в фоновом режиме, чтобы боковой свиток не отображался? –

@RichardRodgers Я обновил ответ, используя 'overflow-x: hidden' на контейнере, чтобы остальная часть изображения увеличивала ширину страницы. – DBS

Еще раз спасибо за помощь. Если окно браузера достаточно велико, я бы хотел показать всю ширину изображения. Прямо сейчас я вижу, что, хотя окно браузера достаточно велико, чтобы соответствовать этому изображению, он все еще показывает только половину. –

Это должно работать для вас. Я добавил position: relative в .контейнер и раздел, затем position: absolute к изображению контейнера. Затем вы можете использовать left: 25%, чтобы настроить, как далеко от экрана вы хотите, чтобы изображение было. 25% можно настроить в соответствии с вашими потребностями. Вы также можете использовать px вместо процентов, если это лучше работает для ваших нужд.

.container { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    height: 508px; 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    width: 552px; 
 
    height: 315px; 
 
    background-color: red; 
 
    position: absolute; 
 
    left: -25%; /* -- Adjust this percentage as needed -- */ 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Site Example</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content=""> 
 
    <meta name="keywords" content=""> 
 
</head> 
 
<body> 
 
    <section> 
 
     <h1>This is the Section</h1> 
 
     <div class="container"> 
 
      <div class="image">This would be the image.</div> 
 
     </div> 
 
    </section> 
 

 
</body> 
 
</html>

источник

2016-08-18 16:25:33

Нажатие изображения на контейнер страницы

ответ

Смежные вопросы