时间戳

首页 > 解决方案 > 如何将图像放置在 div 内，使其完全适合 div 内？

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

问题描述

我想在 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 中？有人可以帮我解决这个问题吗？谢谢。

标签： htmlcss

解决方案

你已经把 className 像这样放在 div 中<div className="image_div">

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

推荐阅读