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。