обрезать изображение, если разрешение экрана меньше 1280

Question

обрезать изображение, если разрешение экрана меньше 1280

0

Поэтому последний вопрос, который я нашел, схож, здесь с 2010 года

У меня есть изображение шириной 1920 px. Я сделал это пропорционально пропорционально слева и справа. Но мне нужно остановить изменение размера, если разрешение будет меньше 1280 и просто порежет его (слева/справа) и останется центрированным, если res> 1280.

.mainImg {
  position: absolute;
  height: 558px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

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

Может быть, кто-нибудь уже знает решение? Я буду очень признателен!

 <body>
    <div class="container">
      <!-- Main part of the webpage -->
        <img src="img/main_01.jpg" class="mainImg shadow" alt="seo matters" />
    </div> <!-- /container -->
  </body>

A1exandr 22 окт. 2013, в 15:11

Источник

0

Вы можете разместить свой HTML
Tom Millard 22 окт. 2013, в 12:13
0

это простой шаблон начальной загрузки.
A1exandr 22 окт. 2013, в 12:18

Теги:

html

css

image

3 ответа

4

Установите min-width: 1280px; то он должен прекратить изменение размера на 1280 пикселей.

Igle 22 окт. 2013, в 10:59

0

Да, но он по-прежнему показывает левую часть изображения, но не центральную, и это основная идея.
A1exandr 22 окт. 2013, в 12:18
0

Итак, вы хотите, чтобы изображение стало меньше до ширины 1280 пикселей, и любое дальнейшее изменение размера окна должно сместить его влево !?
Igle 22 окт. 2013, в 12:22
0

если разрешение экрана меньше 1280px, я хочу, чтобы оно прекратило изменение размера (что сделано), и не показывало левую часть изображения, но центральную.
A1exandr 22 окт. 2013, в 12:28
0

Попробуйте это с событием, которое вызывает изменение размера окна, и установите левую позицию изображения на - половину окна с, как-то так: $( window ).resize(function() { if($(window).innerWidth <= 1280){ var imageElementStyle = document.getElementById('your images id').style; imageElementStyle.left = -($(window).innerWidth / 2;)} });
Igle 22 окт. 2013, в 12:35
0

Спасибо, я не могу использовать jQuery таким образом, клиент хочет постепенного снижения.
A1exandr 22 окт. 2013, в 12:50

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

0

Спасибо Tom Chew-head Millard за ссылку. Этот (отредактированный) код работает так, как я хотел.

 img.mainPic {
  /* Set rules to dimensions */
  min-height: 100%;
  min-width: 1280px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1280px) { /* Specific to this particular image */
  img.mainPic {
    left: 50%;
    margin-left: -640px;   /* 50% */
  }
}

A1exandr 22 окт. 2013, в 10:37

Ещё вопросы

это простой шаблон начальной загрузки.
Да, но он по-прежнему показывает левую часть изображения, но не центральную, и это основная идея.
Итак, вы хотите, чтобы изображение стало меньше до ширины 1280 пикселей, и любое дальнейшее изменение размера окна должно сместить его влево !?
если разрешение экрана меньше 1280px, я хочу, чтобы оно прекратило изменение размера (что сделано), и не показывало левую часть изображения, но центральную.
Попробуйте это с событием, которое вызывает изменение размера окна, и установите левую позицию изображения на - половину окна с, как-то так: $( window ).resize(function() { if($(window).innerWidth <= 1280){ var imageElementStyle = document.getElementById('your images id').style; imageElementStyle.left = -($(window).innerWidth / 2;)} });
Спасибо, я не могу использовать jQuery таким образом, клиент хочет постепенного снижения.

Tom Millard · Accepted Answer · 2013-10-22T09-21-00.000Z

Это помогло мне немного назад, http://css-tricks.com/perfect-full-page-background-image/

Возможно, вы можете изменить его, чтобы удовлетворить ваши потребности.

Похоже, что я хочу, позвольте мне попробовать это.
Дайте мне знать, как это работает :)
Это одна приятная ссылка)) Спасибо, все еще нужно работать над этим, но это уже центрирует то, что мне было нужно.
никаких забот не было в одной лодке неделю назад.