Как я могу расположить изображение как центр, даже изменить размер окна

Question

Как я могу расположить изображение как центр, даже изменить размер окна

0

Я пытаюсь разместить изображение как центр экрана, как при вычислении, например

       var wh = jQuery(window).innerHeight();
        var ww = jQuery(window).innerWidth();
        var fh = jQuery('.drop').innerHeight();
        var fw = jQuery('.drop').innerWidth();

Я не уверен, где я совершил ошибку. Для изменения размера окна, как я пытался с

jQuery(window).resize(function() {
                var wh = jQuery(window).innerHeight();
                var ww = jQuery(window).innerWidth();
                var fh = jQuery('.drop').innerHeight();
                var fw = jQuery('.drop').innerWidth();
            });

Но этот скрипт не поможет, даже если я изменил размер окна, изображение не будет совпадать с центром.

Есть ли способ показать изображение как центр, даже если я изменяю размер окна.

Вот скрипка

Vignesh Pichamani 23 окт. 2013, в 12:58

Источник

1

Вы можете сделать это с помощью CSS.
Bharath R 23 окт. 2013, в 10:09
1

Вы ищете что-то похожее на это? jsfiddle.net/aB8yq/21 - @Vicky
Nitesh 23 окт. 2013, в 10:11
0

Я не видел, чтобы вы использовали (окно) .resize () в вашей скрипке ....
Bhojendra Rauniyar 23 окт. 2013, в 10:12
0

Спасибо, я удалил из скрипки, что изменение размера под вопросом
Vignesh Pichamani 23 окт. 2013, в 10:14
0

Вы должны упомянуть, что вам нужно только в скрипте или CSS
Dinesh Kanivu 23 окт. 2013, в 10:21

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

3 ответа

2

Вы можете сделать это только с помощью css:

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

Скрипка и статья

Patsy Issa 23 окт. 2013, в 07:35

0

Я сделал это в моем проекте.

.side {
height: 357px;
background-color: red;
overflow: hidden;
position: relative;
}
.middle {
position: absolute;
left: 50%;
margin-left: -250px;
background:url('a.jpg') no-repeat;
width:500px;
height:357px;
}


<div class="side">
<div class="middle"></div>

Bharath R 23 окт. 2013, в 07:45

1

Это работает только в том случае, если вы знаете точную высоту / ширину центрируемого элемента, который будет отображаться в OP не так, как он создает элемент динамически
Rory McCrossan 23 окт. 2013, в 10:17

Ещё вопросы

Вы можете сделать это с помощью CSS.
Вы ищете что-то похожее на это? jsfiddle.net/aB8yq/21 - @Vicky
Я не видел, чтобы вы использовали (окно) .resize () в вашей скрипке ....
Спасибо, я удалил из скрипки, что изменение размера под вопросом
Вы должны упомянуть, что вам нужно только в скрипте или CSS
Это работает только в том случае, если вы знаете точную высоту / ширину центрируемого элемента, который будет отображаться в OP не так, как он создает элемент динамически

Rohan Kumar · Accepted Answer · 2013-10-23T08-52-00.000Z

Вы должны попробовать это,

$(window).resize(function () {
    $('.drop2').css({
        position: 'absolute',
        left: ($(window).width() - $('.drop2').outerWidth()) / 2,
        top: ($(window).height() - $('.drop2').outerHeight()) / 2,
    });
});

демонстрация