如何自動調整圖像大小以適合「 div」容器？

時間 2019-12-18

標籤如何自動調整圖像大小適合 div 容器欄目 CSS 简体版

原文原文鏈接

您如何自動調整大圖像的大小，以使其適合較小的div容器，同時保持其寬高比？ css

示例：stackoverflow.com-當圖像插入到編輯器面板上而且圖像太大而沒法容納在頁面上時，圖像將自動調整大小。 html

#1樓

我以這種方式在水平和垂直方向上將超連接內的圖像按比例居中和縮放： css3

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

它已經在Internet Explorer，Firefox和Safari中進行了測試。編輯器

有關居中的更多信息，請參見此處。測試

#2樓

這是一個解決方案，即便所提供的圖像過小或太大而沒法適合div，也能夠在div中垂直和水平對齊img，而不會進行任何拉伸。 spa

HTML內容： ssr

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS內容： code

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery部分： orm

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

#3樓

您能夠將圖像設置爲div的背景，而後使用CSS background-size屬性： htm

background-size: cover;

它將「將背景圖像縮放到儘量大的程度，以使背景區域徹底被背景圖像覆蓋。背景圖像的某些部分在背景定位區域內可能看不到」 – W3Schools

#4樓

將圖像所需的高度和寬度提供給包含<img>標籤的div。不要忘記在適當的樣式標籤中指定高度/寬度。

在<img>標記中，將max-height和max-width爲100％。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正確後，能夠在適當的類中添加詳細信息。

#5樓

如下代碼改編自先前的答案，並由我使用名爲storm.jpg的圖像進行了測試。

這是顯示圖像的簡單頁面的完整HTML代碼。這工做完美，並由我經過www.resizemybrowser.com進行了測試。將CSS代碼放在HTML代碼的頂部，在標題下面。將圖片代碼放在您想要的圖片的任何位置。

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。