Css 如何将图像垂直拉伸到100%并水平裁剪

我想将特色图片

.entry image link img

垂直拉伸到

div.entry-content

高度的100%，并裁剪额外的宽度

---

你能帮我做这件事吗？

如果你的.entry内容高度是固定的，那么你可以硬编码你的.entry图像链接的高度

例如，if.entry内容高度为400px

然后

步骤1： 使父位置的父位置相对

步骤2： 使家长的位置绝对，高度100%

步骤3： 使图像的位置为绝对位置，并更改其位置和边距

很难将整个部分移到这里，所以我编写了一个jQuery脚本来处理这个样式。您可以在站点上运行脚本，因为您有jQuery。对于其他访问者，您可以忽略特定的选择器

var $=jQuery;
var $parentOfParent=$(".entry-content");
var $parent=$(".entry-image-link");
var $image=$(".entry-image-link img");

$parentOfParent.css("position","relative");
$parent.css({
    position: "absolute",
    height: "100%",
});
$image.css({
    height: "100%",
    'max-width': 'none',
    width: 'auto',
    position: 'absolute',
    left: '-1000px',
    right: '-1000px',
    top: 0,
    bottom: 0,
    margin: 'auto',
});

---

您是否尝试过将图像放入设置宽度的容器中，隐藏溢出，拉伸容器中的图像，并使用

zoom

属性缩放图像？我认为工作流程或类似的东西会让你走上正确的轨道。添加代码。但这会扭曲图像的宽度，我需要照片的纵横比保持不变，但有额外的宽度裁剪。谢谢，这很有效，尽管在加载图像之前，事情看起来扭曲了…嗨。你能帮我处理“其他程序”下边栏中的图片吗？当视口变窄时，图像无法达到

.program

的全高。这里的问题与此类似。你最好理解上面的片段，自己解决这个问题@是的，我首先尝试了，替换了

var$parentOfParent=$（“.entry content”）；var$parent=$（“.entry image link”）；var$image=$（“.entry image link img”）有适当的条目，但我明白了。不，你不能只使用相同的代码。您应该理解代码并将其移植到新页面。尝试修改代码段的一些样式，看看会发生什么，以理解为什么代码应该是这样。
var $=jQuery;
var $parentOfParent=$(".entry-content");
var $parent=$(".entry-image-link");
var $image=$(".entry-image-link img");

$parentOfParent.css("position","relative");
$parent.css({
    position: "absolute",
    height: "100%",
});
$image.css({
    height: "100%",
    'max-width': 'none',
    width: 'auto',
    position: 'absolute',
    left: '-1000px',
    right: '-1000px',
    top: 0,
    bottom: 0,
    margin: 'auto',
});