Question

我想在div内放置一个图像，使其完全适合。现在，如果图像的宽度大于包含它的div的宽度（image_div），它将仅剪切图像。下面是代码，

<form>
    <div className="form_fields">
        <span className="required">Viewpoint</span>
        <a>anchor tag</a>
        <div className="image_div">div containing image
            <img src="somelink"/>
        </div>
    </div></form>

    form {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .form_fields {
            padding: $padding $gutter $padding $gutter;
            background-color: #fff;
            position: relative;
            top: 0px;
            left: 0px;
            overflow: auto;
            flex-grow: 1;

           .image_div {
               position: relative;
               display: flex;
               align-items: center;
               justify-content: center;
               width: 105px;
               height: 105px;

            img {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }}}

如何将完整图像放置在包含它的div中？有人可以帮我吗？谢谢。

Answer 1

您已将className这样的<div className="image_div">

放在div中

className不是属性，正确的属性只是class，因此您应将其命名为<div class="image_div">和<div class="form_fields">

Answer 2

您可以为您的image_div提供一个背景图片，其中包含示例中src的URL。

LocationHelper.php

只需确保您输入的路径正确无误即可，因为在某些情况下，该路径（如果您托管图像）在页面和CSS文件中的写入方式可能会有所不同。

Answer 3

如果您要保持图像的比例，以使其看起来不会拉伸（因为似乎不清楚是否是这种情况），则可以使用图像的另一种选择作为background-image：

    img {
        width:auto;
        height:auto;
        max-width:105px;
        max-height:105px;
        }

<img src="https://via.placeholder.com/150x100">
This is originally 150x100 but is reduced down to 105 (the max-width) x 70 as per the above css.

如何将图像放置在div内，使其完全适合div？

3 个答案: