Question

我有一个图像，例如1000x1000像素。我想将其插入我的网页，使其具有500x300像素。我不希望它被扭曲。我希望将其缩小到其宽度的50％（因此500x500，而不会变形），然后裁剪为300的高度（即，从这500 px的图像顶部显示300 px的图像）。

我正在尝试使用普通的redux store标签，但是如果需要CSS也是可以的。

谢谢。

Answer 1

您可以将图像放在div内，

并设置div隐藏的高度，宽度和溢出；

<div style="width: 500px; height: 300px; overflow: hidden;">
  <img src="./1.jpg" alt="" style="width:100%;" >
</div>

Answer 2

创建一个尺寸为500x300像素的div，并将您的图像作为该div的背景图像，其尺寸为cover，位置为top。

HTML：

<div id="my-image"></div>

CSS：

#my-image {
    width: 500px;
    height: 300px;
    background: url(your-image-location.jpg);
    background-size: cover;
    background-position: top;
}

Answer 3

这里有一些例子。我认为您想要的是#example3。另一方面，您也可以看到此working example：）

.fit-image {
	height: 500px;
	width: 300px;
	background: url("https://via.placeholder.com/1000x1000");
  background-size: contain;
	background-repeat: no-repeat;
}

.resize-image {
	height: 500px;
	width: auto;
}


.crop-image {
	height: 500px;
	width: 300px;
	background: url("https://via.placeholder.com/1000x1000");
	background-size: cover;
}

<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>

<h3>Resize an image</h3>
<div id="example2">
	<img src="https://via.placeholder.com/1000x1000" class="resize-image" /> 
</div>

<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>

Answer 4

您可以使用以下两种方法实现此目的：

方法1：，带有CSS和背景图片

放弃img标签，然后将所需的图像放在div的background-image属性中，例如：

width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;

您可以看到工作代码here。

方法2：使用position：absolute

将您的img标签放入div中，然后使用overflow：hidden like裁剪掉其余标签：

div{
    width:500px;
    height:300px;
    overflow:hidden;
    position:relative;
}

div img{
    width:100%;
    height: auto;
    position:absolute;
    left:0;
    top: calc(50% - 250px);
}

And the working code。

如果您希望图片在div中垂直居中，则应添加 position ， left 和 top 。

将图像插入HTML以进行裁剪

4 个答案: