如何在固定高度的中心图像位置 [英] How center image position with fixed height

问题描述

我无法以固定高度很好地显示图片，因为展示拉伸，我想定位图片。

我想要使用300px的固定大图片高度，但图像不能显示拉伸。

图像链接必须在img标记中，因为它来自数据库。

我在这里提供了一个示例代码：

< div class =image > < img src =http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg/>< / div>

谢谢

解决方案

您可以使用 object-fit 来获得相同的结果

object-fit属性定义元素如何响应高度
和其内容框的宽度。它适用于图像，视频和
其他嵌入式媒体格式，与对象位置
属性一起使用。使用object-fit，我们可以通过
裁剪一个内联图像，使我们能够对它在框内如何挤压和延伸
进行细致控制。

可以使用以下五个值中的一个设置object-fit：

1. 填充：这是这是默认值，它将图像拉伸以适应
   内容框，而不管其长宽比如何。


2. 包含：增加或减少图像的大小以填充
   box，同时保留其长宽比。


3. 封面：图像将填充盒子的高度和宽度，一旦再次保存宽高比，但经常裁剪图像在
   的过程中。 none：图片将忽略
   父母的高度和宽度并保留其原始大小。


4. 缩小比例：图片将比较无与
   之间的差异包含以查找最小的具体对象大小。

Object-fit snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .image {position：relative;宽度：100％; height：300px;}。image img {width：100％;对象的配合：盖; height：300px;}  

< div class =image > < img src =http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg/>< / div>

I can't show an image well with fixed height because shows stretched, i want to position image.

I want to can use large images with 300px of fixed height but the image can't show stretched.

The image link have to come in img tag because it come from database.

I put here a example code:

.image
{
  position:relative;
  width: 100%;
  height: 300px;
}

.image img
{
  width: 100%;
  height: 300px;
}

<div class="image">
  <img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>

Thank you

解决方案

You can use object-fit to get the same

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

object-fit can be set with one of these five values:

1. fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
2. contain: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
3. cover: the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process. none: image will ignore the height and width of the parent and retain its original size.
4. scale-down: the image will compare the difference between none and contain in order to find the smallest concrete object size.

Object-fit

.image
{
  position:relative;
  width: 100%;
  height: 300px;
}

.image img
{
  width: 100%;
  object-fit:cover;
  height: 300px;
}

<div class="image">
  <img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>

这篇关于如何在固定高度的中心图像位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！