html - 如何将图像放在 div 中，使其完全适合 div？

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中<div className="image_div">

className 不是一个属性，正确的属性只是类，所以你应该把它写成 <div class="image_div">和 <div class="form_fields">