jQuery或CSS在MVC中动态图像的固定大小

Question

我正在寻找一个jQuery脚本或css，该脚本或css可以在全窗口高度和宽度下将所有图像的大小调整为700x400，但在调整浏览器大小时仍保持引导图像响应功能。 目前，我的图片以全尺寸显示，并且我正在动态添加图片，输出看起来像这样：

但是它应该看起来像这样：

我的视图如下所示：

            <div class="col-md-4 portfolio-item">
                <a href="@Url.Action("Details", "Post", new { urlslug = item.UrlSlug })">
                    <img class="img-responsive" src="@Html.Raw("data:image/jpeg;base64," + images.Single(image => image.Key == item.Id).Value)" alt="">
                </a>
                <h3>
                    <a href="@Url.Action("Details", "Post", new { urlslug = item.UrlSlug })">@Html.DisplayFor(modelItem => item.Title)</a>
                </h3>

                <p>@Html.DisplayFor(modelItem => item.ShortDescription)</p>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { urlslug = item.UrlSlug }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </div>

Answer 1

我可以建议您是否要使用图像容器来走CSS路线。 本质上，我的意思是类似以下内容：

:::: HTML ::::

<!--  creates a container for your image -->
<div id="imageDiv">
     <img src='yourImageHere'>
</div>

:::: CSS ::::

/* modify the container you created to be a set width-height */
#imageDiv{
  width: 400px;
  height: 700px;
  overflow: hidden; /* essential, hides the overflow from the image */
}

#imageDiv img{
  width: 100%;  /* makes image 100% width of the container */
  position: relative; /* allows movement inside the container */
      /* OPTIONAL: use this to adjust where the 'center' starts */
      /* only useful on images that will be clipped */
  top: -__px;  
}

我不是代码的100％，多数民众赞成在内存上。 但实际上，用英语来说，它应该做的是为您可以控制尺寸的图像创建一个容器。 创建容器后，可以在其中添加图像。

CSS有点技巧。 本质上是overflow: hidden; 允许您隐藏容器上的滚动条，以防止输入的图片大于所需大小。

在下一个块中，我们将图像设置为width: 100%; 这样可以使图像填充我们创建的容器（如果您的大多数图像是纵向图像而不是横向图像，我建议将其更改为height: 100%;相反，这将使其填充容器高度的100％。

position: relative; 只是允许我们在刚创建的容器内移动图像。

在此情况下，我们从top: -__px使用位置元素top: -__px将图像向上移动。 如果您最终使用height: 100%; 由于肖像图片，你可能需要调整图像或者left:或right:获得所需的外观。

---

我希望这有帮助。 由于这些元素的大小是固定的，因此您很可能必须为其重新创建媒体查询，除非您将它们放在BOOTSTRAP样式的col-sm-3或其他某些列中，这将自动对元素进行重新组织，只是没有调整大小。

不错的是，对于要编写的媒体查询，您只需更改width: 400px; 和height: 700px; 容器的大小，由于将所有图像元素设置为其父元素的100％ ，因此该图像元素会自动调整大小，在这种情况下为#imageDiv

希望对您有所帮助，或者是您正在寻找的东西。 这是为图像创建容器的一种好方法，如果它们的大小不相同，则在渲染时不会使它们变形。 我确实建议您使用具有类似纵横比的图像，这只会使生活更轻松。 如果没有，请发表评论，也许我可以提供更多帮助。 如果这是您想要的，很高兴我可以提供帮助！

---

编辑

Bootstrap响应式图像在样式化图像时可能很有用。 但是您仍然需要更改CSS中父元素的大小。 真有意思。 但是，对父容器使用基于％或vh / vw的宽度和高度将使其全部自动调整大小。

如果您不熟悉“ vh / vw”，它是CSS3中的新度量单位，从本质上讲，它意味着视口的高度/宽度。 因此100vh会将某东西设置为屏幕的整个高度，而不知道它的实际像素大小（我知道很多声音，例如％，但是当要尝试以该高度制作侧边栏或主体时，它非常方便，您不必担心％，position：absolute或容器hack来填充窗口，它也可以动态调整大小，但是就目前而言，我相信只有Firefox可以动态调整vh / vw元素的大小。

https://css-tricks.com/viewport-sized-typography/

Answer 2

如果我正确理解了这个问题，则希望以700 x 400元素的最大宽度或高度显示任何尺寸的图像。

• 最好的方法是在服务器上动态调整图像大小。 由于您使用的是ASP， 因此该Stack Overflow线程可以解决以下问题：
• 如果要要求用户使用现代（IE 9+）浏览器，则在浏览器中执行此操作的最简单方法是使用CSS Background Size属性 ，该属性允许您通过多种方式填充元素
• 如果您确实想以编程方式进行操作，则可以使用JQuery插件，例如Image Resize

祝你好运！ 让我们知道您最终要做什么。

Answer 3

我将使用照片编辑程序将图像调整为700x400。 您的图片的高度和宽度都是不同的，因此当您自动调整它们的大小时，它们会被切除或拉长。 如果您在700x400的图像编辑器中制作了一个新文件，并根据需要调整图像大小，则效果会更好。 这样一来，它就可以像您现在在自举程序中进行设置一样工作，并具有自适应图像大小，并且它们永远不会大于您的最大宽度和高度700x400。