браузер webkit не полностью загружает изображение

#html #image #google-chrome #safari #webkit

#HTML #изображение #google-chrome #safari #webkit

Вопрос:

Я создаю сайт для клиента и столкнулся с проблемой, из-за которой в браузере webkit изображения загружаются не полностью. итак, chrome и safari на Mac и ipad. http://coatesconstruction.co.uk

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

одной из целей этого сайта было сделать правую колонку плавной, чтобы при изменении пользователем размера браузера отображаемое изображение увеличивалось, что означало, что серверная часть сохраняет изображения шириной 1600 пикселей, а я использую width: 100%, чтобы они автоматически меняли размер в левой колонке. Это означает, что изображения на сервере довольно большие, это как-то связано с размером, который мешает chrome и safari их показывать?

1. Я изменил высоту div.slideshow на 583 пикселя (до этого было 4 пикселя), и изображения появились полностью. Это проблема css.

2. Я пытаюсь использовать jquery, чтобы получить высоту изображения. я использую плагин cycle для изменения изображений. используя событие after, я делаю это. я могу жестко задать высоту и доказать, что в Firefox это изменяет высоту контейнера, что позволяет отображать изображение, даже добавляет пробел внизу, когда я жестко задаю его слишком большим. это просто не влияет на контейнер в браузерах webkit. пробовал сбросить css как для .slideshow, так и для .col1. использование firebug для проверки его работы. $(‘.col1’).css(‘height’, функция(){ возвращает $(‘this’).height(); });

Ответ №1:

Он загружает изображение целиком.

Вы где-то напутали в коде CSS, и именно поэтому изображение целиком не отображается в браузерах Webkit.

Попробуйте установить высоту div # col1 в 656 пикселей (или любую другую высоту, которую вы хотите!), и вы увидите изображение целиком.

Ответ №2:

изображения загружаются нормально, проблема в том, что вы их обрезаете 🙂

 .col1, .col2, .col3 {
    overflow: hidden;
}

Поскольку все ваши изображения position:absolute установлены, они не будут увеличивать родительский контейнер, поэтому ваш родительский контейнер застрял на высоте 124 пикселей.

Ответ №3:

 .leftmenu .col1 {
    height: 765px;
}