фоновое изображение сжато по горизонтали

0

основанный на рекомендации ("css only technique number 1" здесь http://css-tricks.com/perfect-full-page-background-image/), я использовал встроенный img-элемент и css для создания фонового изображения, которое заполните все окно браузера.

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

например, этот jfiddle... если вы перемещаете браузер вокруг, вы можете видеть, что пропорция меда boo boo не сохраняется.

http://jsfiddle.net/4040newb/h7QMv/2/

  <div class="container-fluid">
    <a href="gallery.html">
    <img  src="http://thenypost.files.wordpress.com/2013/09/tv-honey_boo_boo.jpg" class="bg "/>
    </a>
  </div><!-- .container -->

  • 0
    мое изображение 1280 пикселей в ширину, кстати
  • 0
    Не могли бы вы создать jsFiddle, чтобы мы могли повозиться?
Показать ещё 5 комментариев
Теги:
background-image

2 ответа

1
Лучший ответ

Я бы очень рекомендовал использовать метод CSS3, описанный первым в статье Post - Это более простой и надежный метод:

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
Поделиться
  • 0
    Я сделал это, но я хочу конкретно понять реализацию метода, который я описал. также этот метод требует создания дополнительного пустого элемента div для использования фонового изображения в качестве ссылки на другую страницу. этот способ сделает это автоматически.
  • 0
    вы всегда можете добавить событие onclick для тела с помощью этого метода ... но .... дайте мне секунду
Показать ещё 14 комментариев
1

Вместо использования img-элемента вы можете просто применить фоновое изображение к div (или к любому другому контейнеру, растянутому в соответствии с границами браузера).

Затем для фона выполните следующие действия:

.picture {
    background-image: url(...);

    background-size:cover; /* this way */
    background-size:content; /* or this one (which you prefer) */
}

... растянуть изображение соответственно его размеру контейнера.

РЕДАКТИРОВАТЬ:

Кроме того, в этом случае:

html, body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.container-fluid
{
    min-width:100%;
    min-height:100%;
    background-position:center;
}

(Но это пример - вы должны играть с вашими макетами по своему усмотрению).

Поделиться
  • 0
    я не мог заставить это работать, ты можешь показать мне в этом jfiddle? jsfiddle.net/4040newb/h7QMv/2
  • 0
    Да. Пожалуйста, взгляните на jfiddle.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню