Question

我有一个我根据CSS规则定义的div

<style>
    .image-preview {
        height: 600px;
        width: 50%;
        border: 1px solid red;
    }

    .image {
        width: auto;
        height: 600px;
    }
</style>

<div class="image-preview">
    <img src="abc.jpg" class="image">
</div>

假设width:50%为300px且 abc.jpg 属于500px，则它来自div。我希望将图像保持在div中心对齐并保持其纵横比。

我已经给了width:auto但这不起作用。我对CSS的经验不多，所以如果这个问题太基础，请忽略。

谢谢！

Answer 1

您可以使用display flex来使图像居中，确保图像始终保持其宽高比......

.image-preview {
        height: 600px;
        width: 50%;
        border: 1px solid red;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .image {
       max-width:100%;
       max-height:100%;
    }

<div class="image-preview">
    <img src="http://via.placeholder.com/500x150" class="image">
</div>

Answer 2

尝试使用flexbox，这可能是调整div中项目的最佳工具。您可以在此处找到更多相关信息：https://www.w3schools.com/csS/css3_flexbox.asp。

＆＃13;

    .image-preview {
        height: 600px;
        width: 600px; /*whatever you want*/
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image {
        height: 400px; /*Any value would still keep it vertically centered thanks to the align-items property*/
        width: auto;
    }

＆＃13;

<div class="image-preview">
    <img src="https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937%21Example.jpg" class="image">
</div>

＆＃13;

justify-content属性处理水平对齐，align-items属性处理垂直对齐。

Answer 3

因此，image是内联元素：

img {
   display: block;
   margin: 0 auto; //this is center your image
   height: auto; // this will make it ration
   max-width: 1200px; //or whatever is the size of your image
}

这将使您的图像充分响应，居中和理性。

Answer 4

＆＃13;

  .image-preview {
    border: 1px solid red;
    box-sizing: border-box;
    height: 600px;
    padding: 10px;
    text-align: center;
    width: 50%;
}

    .image {
        width: auto;
        height: 100%;
        max-width:100%;
    }

＆＃13;

<div class="image-preview">
    <img src="https://placeimg.com/300/600/any" class="image">
</div>

＆＃13;

你可以通过设置高度100％来做到这一点; width：auto to image。

CSS自动调整特定大小div的图像

4 个答案: