Question

我无法以固定的高度显示图像，因为显示拉伸，我想定位图像。

我希望能够使用300px固定高度的大图像，但图像无法显示拉伸。

图片链接必须是img标记，因为它来自数据库。

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

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢

Answer 1

使用background-image内联，然后使用background-size: cover;

覆盖它

＆＃13;

.image
{
  position:relative;
  width: 100%;
  height: 300px;
      background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用object-fit获取相同的

object-fit属性定义元素如何响应高度和其内容框的宽度。它适用于图像，视频和其他可嵌入媒体格式与对象位置一起使用属性。对象适合使用我们可以裁剪内嵌图像让我们对它如何s and和伸展进行细致的控制在它的盒子里。

可以使用以下五个值之一设置对象拟合：

fill：这是拉伸图像以适合的默认值内容框，无论其宽高比如何。
包含：增加或减少图像的大小以填充盒子，同时保持其宽高比。
封面：图像将填充其框的高度和宽度，一次再次保持其纵横比，但往往裁剪图像这个过程。 none：图像将忽略的高度和宽度父母并保留其原始大小。
缩小：图像将比较none和。之间的差异包含以便找到最小的具体对象大小。

<强> 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>

Answer 3

你可以用这个

＆＃13;

$opt = array(
    'resource' => 'customers',
    'id' => $customer_id
);

＆＃13;

.image
{
  position:relative;
  width: 100%;
  height: 300px;
background-image:url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg');
background-size: cover;
}

＆＃13;

Answer 4

您无法使用图像标记的宽度和高度来拉伸图像。所以要么使用宽度或高度。

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

.image img
{
  max-height: 300px;
}

或使用

object-fit:cover;

但是图像会被裁剪。

如何以固定高度定位中心图像

4 个答案: