Как обрезать изображение по ячейке таблицы? [Дубликат]

Расширение ответа Rentering.com в сценариях, где нужно позаботиться о целом графике многих типов, и вы ищете строго типизированное решение, этот класс может помочь, см. использование (свободно). Он работает как черный список или белый список для каждого типа. Тип не может быть одновременно ( Gist - также содержит глобальный список игнорирования).

public class PropertyFilterResolver : DefaultContractResolver
{
  const string _Err = "A type can be either in the include list or the ignore list.";
  Dictionary> _IgnorePropertiesMap = new Dictionary>();
  Dictionary> _IncludePropertiesMap = new Dictionary>();
  public PropertyFilterResolver SetIgnoredProperties(params Expression>[] propertyAccessors)
  {
    if (propertyAccessors == null) return this;

    if (_IncludePropertiesMap.ContainsKey(typeof(T))) throw new ArgumentException(_Err);

    var properties = propertyAccessors.Select(GetPropertyName);
    _IgnorePropertiesMap[typeof(T)] = properties.ToArray();
    return this;
  }

  public PropertyFilterResolver SetIncludedProperties(params Expression>[] propertyAccessors)
  {
    if (propertyAccessors == null)
      return this;

    if (_IgnorePropertiesMap.ContainsKey(typeof(T))) throw new ArgumentException(_Err);

    var properties = propertyAccessors.Select(GetPropertyName);
    _IncludePropertiesMap[typeof(T)] = properties.ToArray();
    return this;
  }

  protected override IList CreateProperties(Type type, MemberSerialization memberSerialization)
  {
    var properties = base.CreateProperties(type, memberSerialization);

    var isIgnoreList = _IgnorePropertiesMap.TryGetValue(type, out IEnumerable map);
    if (!isIgnoreList && !_IncludePropertiesMap.TryGetValue(type, out map))
      return properties;

    Func predicate = jp => map.Contains(jp.PropertyName) == !isIgnoreList;
    return properties.Where(predicate).ToArray();
  }

  string GetPropertyName(
  Expression> propertyLambda)
  {
    if (!(propertyLambda.Body is MemberExpression member))
      throw new ArgumentException($"Expression '{propertyLambda}' refers to a method, not a property.");

    if (!(member.Member is PropertyInfo propInfo))
      throw new ArgumentException($"Expression '{propertyLambda}' refers to a field, not a property.");

    var type = typeof(TSource);
    if (!type.GetTypeInfo().IsAssignableFrom(propInfo.DeclaringType.GetTypeInfo()))
      throw new ArgumentException($"Expresion '{propertyLambda}' refers to a property that is not from type '{type}'.");

    return propInfo.Name;
  }
}

Использование:

var resolver = new PropertyFilterResolver()
  .SetIncludedProperties(
    u => u.Id, 
    u => u.UnitId)
  .SetIgnoredProperties(
    r => r.Responders)
  .SetIncludedProperties(
    b => b.Id)
  .Ignore(nameof(IChangeTracking.IsChanged)); //see gist

288
задан Barna Tekse 25 March 2013 в 15:51
поделиться

15 ответов

Вы могли бы использовать комбинацию обоих методов, например.

<div class="crop">
    <img src="..." alt="...">
</div>

CSS:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

Вы можете использовать отрицательный margin для перемещения изображения в пределах <div/>.

414
ответ дан cubuspl42 21 August 2018 в 08:04
поделиться
  • 1
    Обратите внимание: если вы установите положение: относительное на содержащемся изображении, вам нужно будет установить положение: relative в содержащем div. Если вы этого не сделаете, я обнаружил, что IE фактически не будет обрезать изображение. – Frank Schwieterman 26 June 2009 в 23:56
  • 2
    также удалить высоту из .crop img class – Waqar Alamgir 25 May 2011 в 17:32
  • 3
    @ waqar-alamgir Это не сработает, если вы удалили объявление высоты – roborourke 26 May 2011 в 16:43
  • 4
    Также обратите внимание, что при использовании css для обрезки изображения пользователю все равно нужно загрузить изображение. Возможно, было бы лучше использовать php и GD или другую библиотеку редактирования изображений для изменения размера и обрезки изображения перед его отправкой пользователю. Все зависит от того, что вы хотите, загружая сервер или пропускную способность пользователей. – J-Rou 19 August 2011 в 17:35
  • 5
    Просто примечание для других: высота и ширина .crop определяют, где разрезать самую нижнюю и самую правую часть изображения. .crop img height и width будет масштабировать изображение. .crop img margin будет панорамировать изображение – Frederik 25 April 2012 в 14:59
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 
4
ответ дан 151291 21 August 2018 в 08:04
поделиться

Мне нужно было сделать это недавно. Я хотел сделать миниатюру ссылкой на график NOAA. Поскольку их график может измениться в любое время, я хотел бы, чтобы мой эскиз изменился вместе с ним. Но есть проблема с их графиком: у него огромная белая граница наверху, поэтому, если вы просто масштабируете ее, чтобы сделать эскиз, вы получите посторонние пробелы в документе.

Вот как я его решил :

http://sealevel.info/example_css_scale_and_crop.html

Сначала мне нужно было сделать немного арифметики. Исходное изображение NOAA составляет 960 × 720 пикселей, но верхние семьдесят пикселей являются лишней белой границей. Мне понадобился эскиз 348 × 172 без дополнительной границы области вверху. Это означает, что желаемая часть исходного изображения составляет 720 - 70 = максимум 650 пикселей. Мне нужно было масштабировать до 172 пикселей, т. Е. 172/650 = 26,5%. Это означало, что 26,5% из 70 = 19 строк пикселей необходимо удалить из верхней части масштабированного изображения.

Итак ...

  1. Установите высоту = 172 + 19 = 191 пикселей: height = 191
  2. Установите нижнее поле на -19 пикселей (сокращение изображения до 172 пикселей): margin-bottom: -19px
  3. Установите верхнюю позицию для - 19 пикселей (смещение изображения вверх, так что верхние 19 строк столбцов переполнены и скрыты вместо нижних): top: -19px

Полученный HTML выглядит следующим образом:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Как вы можете видеть, я выбрал стиль, содержащий & lt; a & gt; тег, но вместо этого вы можете вместо этого стирать & lt; div & gt ;, [. g11]

. Один из артефактов этого подхода состоит в том, что если вы покажете границы, верхняя граница будет отсутствовать. Поскольку я использую border = 0, это не проблема для меня.

0
ответ дан Dave Burton 21 August 2018 в 08:04
поделиться

Вы можете поместить тег img в тег div и сделать то и другое, но я бы рекомендовал не масштабировать изображения в браузере. Это делает отвратительную работу большую часть времени, потому что браузеры имеют очень упрощенные алгоритмы масштабирования. Лучше всего выполнить масштабирование в Photoshop или ImageMagick, а затем подавать его клиенту красиво и красиво.

1
ответ дан Dave Markle 21 August 2018 в 08:04
поделиться

В классе урожая поместите размер изображения, который вы хотите отобразить:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

html будет выглядеть так:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
3
ответ дан Deivide 21 August 2018 в 08:04
поделиться

Есть services , такие как Filestack, которые сделают это за вас.

Они берут ваш url изображения и позволяют изменять его с помощью параметров URL. Это довольно просто.

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

. Весь url выглядит так:

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

но важная часть - это просто

resize=width:200/crop=d:[0,25,200,100]

1
ответ дан ferrantim 21 August 2018 в 08:04
поделиться
  • 1
    Хороший штекер hahaha – Martin 13 February 2017 в 14:36
  • 2
    хороший плагин, возможно, - но в равной степени - потрясающий сервис (нет, мне не платят, чтобы сказать это ;-)) - я буквально только что подписался, и это довольно круто – Jonathan Lyon 11 April 2017 в 06:48
<div class="crop">
    <img src="image.jpg"/>
</div>
.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}
122
ответ дан Igor Ivancha 21 August 2018 в 08:04
поделиться

Спасибо sanchothefat.

У меня есть улучшение вашего ответа. Поскольку урожай очень адаптирован для каждого изображения, эти определения должны быть в HTML вместо CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
5
ответ дан Kirby 21 August 2018 в 08:04
поделиться
<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}
2
ответ дан Linus Caldwell 21 August 2018 в 08:04
поделиться

Live Пример: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Объяснение: Здесь размер изображения изменяется по ширине и высоте изображения. И растение выполняется с помощью свойства клипа.

Подробнее о свойствах клипа см. Ниже: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property /

2
ответ дан Rafee Muhammad 21 August 2018 в 08:04
поделиться

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

Это довольно тривиально, но если кто-то заинтересован, я могу выкопать и опубликовать код (asp.net)

1
ответ дан Rob 21 August 2018 в 08:04
поделиться
  • 1
    CGI, вероятно, самый переносимый метод (и эффективный с пропускной способностью), если только OP не намерена позволить пользователю выполнять собственное изменение размера и обрезку с помощью Javascript. – strager 29 January 2009 в 21:48

Вы пытались использовать это?

.centered-and-cropped { object-fit: cover }

Мне нужно было изменить размер изображения, в центре (как по вертикали, так и по горизонтали), а затем обрезать его.

Я был рад найти, что это можно сделать в одной css-строке. Посмотрите пример здесь: http://codepen.io/chrisnager/pen/azWWgr/?editors=110


Вот CSS и HTML код из этого примера:

CSS:

.centered-and-cropped { object-fit: cover }

HTML:

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
  style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
77
ответ дан SombreErmine 21 August 2018 в 08:04
поделиться
  • 1
    Спасибо, я думаю, что это самый простой и самый универсальный способ - но он не работает с IE: / Найти документы здесь: developer.mozilla.org/de/docs/Web/CSS/object -Манекенщица – mozzbozz 4 August 2015 в 11:57
  • 2
    CSS3 object-fit не поддерживается IE11 или EDGE (14) caniuse.com/#feat=object-fit – eye-wonder 1 November 2016 в 10:10
  • 3
    @ eye-wonder, он поддерживается в Edge 16, скоро выйдет. Если он не критичен и используется экономно, он может быть использован сегодня – Ray Foss 17 July 2017 в 19:07
  • 4
    В CSS3 мы можем попробовать любой способ img + object-fit или div + background-image. До сих пор в моем опыте фоновое изображение можно использовать для установки большего количества условий. – Eric 2 February 2018 в 08:22
  • 5
    На данный момент это также поддерживается Edge (с тех пор не знаю). – Gerald Schneider 30 July 2018 в 13:02

Если вы используете Bootstrap, попробуйте использовать { background-size: cover; } для <div>, возможно, дать div классу сказать <div class="example" style=url('../your_image.jpeg');>, чтобы он стал div.example{ background-size: cover}

0
ответ дан user5313842 21 August 2018 в 08:04
поделиться
124
ответ дан Igor Ivancha 1 November 2018 в 02:54
поделиться
124
ответ дан Igor Ivancha 1 November 2018 в 02:54
поделиться