Расширение ответа 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
Вы могли бы использовать комбинацию обоих методов, например.
<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/>
.
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Мне нужно было сделать это недавно. Я хотел сделать миниатюру ссылкой на график 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 строк пикселей необходимо удалить из верхней части масштабированного изображения.
Итак ...
Полученный 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, это не проблема для меня.
Вы можете поместить тег img в тег div и сделать то и другое, но я бы рекомендовал не масштабировать изображения в браузере. Это делает отвратительную работу большую часть времени, потому что браузеры имеют очень упрощенные алгоритмы масштабирования. Лучше всего выполнить масштабирование в Photoshop или ImageMagick, а затем подавать его клиенту красиво и красиво.
В классе урожая поместите размер изображения, который вы хотите отобразить:
.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>
Есть 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]
<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*/
}
<img />
просмотрите object-fit: cover
и соответствующие значения из значений изображения CSS и значения уровня 3 для модуля уровня содержимого .
– Joel Purra
26 July 2016 в 07:21
Спасибо sanchothefat.
У меня есть улучшение вашего ответа. Поскольку урожай очень адаптирован для каждого изображения, эти определения должны быть в HTML вместо CSS.
<div style="overflow:hidden;">
<img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
<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;
}
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 /
Что я сделал, так это создать скрипт на стороне сервера, который изменит размер и обрезает изображение на сервере, поэтому он будет отправлять меньше данных через interweb.
Это довольно тривиально, но если кто-то заинтересован, я могу выкопать и опубликовать код (asp.net)
Вы пытались использовать это?
.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">
Если вы используете Bootstrap, попробуйте использовать { background-size: cover;
}
для <div>
, возможно, дать div классу сказать <div class="example" style=url('../your_image.jpeg');>
, чтобы он стал div.example{
background-size: cover}