JavaScript / HTML: как отобразить IMG с заданным измерением и, если изображение шире или выше этого измерения, обрезать / скрыть переполнение? - PullRequest
Новая
       14

JavaScript / HTML: как отобразить IMG с заданным измерением и, если изображение шире или выше этого измерения, обрезать / скрыть переполнение?

3 голосов
/ 06 мая 2010

У меня есть куча изображений, которые гарантированно будут иметь:

  • минимальная ширина = 200px
  • максимальная ширина = 250px
  • минимальная высота = 150px
  • максимальная высота = 175px

То, что я хочу сделать, это отобразить прямоугольник изображения размером 200 на 150 пикселей при сохранении масштаба (без растяжения или сжатия).

Это значит, что у меня может быть переполнение.

Как я могу отобразить изображение так, чтобы оно сохраняло пропорции к исходному размеру изображения, но при этом отображалось в окне 200x150 px и скрывало любое переполнение?

Ответы [ 6 ]

2 голосов
/ 06 мая 2010

Оберните их в контейнер с нужными вам размерами и overflow: hidden.

1 голос
/ 06 мая 2010

Я сделал быстрое демо (онлайн здесь) способа решения, похожего на второй пример Наума. В пределах установленного вами размера есть 3 изображения. Он не изменяет размеры и не растягивает изображения, и они будут следовать выравниванию окружающего текста.

Надеюсь, это поможет,

Jedidiah 

  <span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
  <span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
  <span class="thumbnail" style="background-image:url(250_175.jpg);"></span>


  span.thumbnail{
    display:block; display:inline-block;
    width:200px; height:150px;
    background-position: center center;
    background-repeat: no-repeat;
  }
  • Используйте span вместо div, потому что IE6 + 7 позволит вам только установить display: inline-block для элемента, который встроен естественным образом.
  • Первый экран: блок является запасным вариантом для Firefox 2, который не поддерживает встроенный блок.
1 голос
/ 06 мая 2010

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

<div style="width:Npx; height:Npx; overflow:hidden">
  <img src="source.png" style="width:Npx;">
</div>

так как эта работа, div будет держать изображение в прямоугольнике Xpx на Ypx, который вы определили, и "обрезать" все, что находится снаружи. Затем вы используете функцию изменения размера, которой у каждого браузера вы можете назначить С изображением, и браузер изменит его для вас. Таким образом, если вы поместите ту же ширину, что и держатель div, вы получите изображение, соответствующее изображению в этот прямоугольник. Это лучший вариант, который я могу найти без использования кода на стороне сервера.

следующий пример:

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

<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>

надеюсь помочь вам ... лучше всего

0 голосов
/ 22 сентября 2011

Просто установите min-height:whatever и max-height:whatever и overflow:hidden на блоки, затем просто поместите изображения в блок, и все.

0 голосов
/ 06 мая 2010

Теоретически, это именно то, для чего используется свойство clip CSS - но есть один, иногда очень болезненный, побочный эффект от его использования, однако - изображение должно быть абсолютно позиционировано: 

<html>
  <head>
    <style type="text/css">
    .thumbnail {
      width:200px;
      height:150px;
    }
    .thumbnail img {
      position:absolute;
      clip:rect(0, 200px, 150px, 0);
    }
    </style>
  </head>
  <body>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
  </body>
</html>

Тот факт, что это выводит изображения из потока документов, довольно неприятен - лучшее, что вы можете сделать, это поместить их в рамку правильных размеров (что означает, что вы также можете просто использовать методы маски переполнения, предложенные другими людьми) ). Клип является полезным свойством в нужных местах, и многие люди, кажется, не знают об этом.

0 голосов
/ 06 мая 2010

Если ваши изображения особенно велики или их будет много (например, браузер миниатюр). Возможно, вы захотите создать предварительно обрезанную копию изображения. Это можно сделать с помощью gd или imagemagick [0] - вы также можете найти несколько библиотек-оболочек вокруг этих расширений, которые могут облегчить задачу.

[0] http://php.net/manual/en/refs.utilspec.image.php

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...