AntD Select组件图片仅显示部分，如何调整高度完整展示？

问题描述 #

我希望在AntD的Select组件选项中展示图片，但目前仅能显示图片的一部分。尝试修改Select组件的高度但无效，代码如下：

import { Form, Image, Layout, Select } from "antd";
import { React } from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout style={{ margin: 0, padding: 0 }}>
            <Content style={{ padding: "0px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <Select multiple mode="tags">
                            <Select.Option value="1">
                                <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="2">
                                <img src="https://pro.kmysistem.com/images/ghs02.png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="3">
                                <img src="https://pro.kmysistem.com/images/ghs03.png" style={{ width: 50 }} />
                            </Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;

解决方法 #

AntD Select的下拉选项默认有固定的内边距和行高，会裁切超出的图片内容，可通过以下方式解决：

1. 给单个选项自定义样式 #

直接为Select.Option设置内边距和自动高度，同时将图片设为块级元素避免间距问题：

<Select.Option value="1" style={{ padding: '4px 12px', height: 'auto' }}>
  <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50, display: 'block' }} />
</Select.Option>

2. 全局批量修改样式 #

如果需要统一调整所有Select选项，可在全局CSS中添加以下样式：

.ant-select-item-option {
  height: auto !important;
}
.ant-select-item-option-content {
  padding: 4px 0 !important;
}

修改后的完整代码 #

import { Form, Image, Layout, Select } from "antd";
import React from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout style={{ margin: 0, padding: 0 }}>
            <Content style={{ padding: "0px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <Select multiple mode="tags">
                            <Select.Option value="1" style={{ padding: '4px 12px', height: 'auto' }}>
                                <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50, display: 'block' }} />
                            </Select.Option>
                            <Select.Option value="2" style={{ padding: '4px 12px', height: 'auto' }}>
                                <img src="https://pro.kmysistem.com/images/ghs02.png" style={{ width: 50, display: 'block' }} />
                            </Select.Option>
                            <Select.Option value="3" style={{ padding: '4px 12px', height: 'auto' }}>
                                <img src="https://pro.kmysistem.com/images/ghs03.png" style={{ width: 50, display: 'block' }} />
                            </Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;

内容的提问来源于stack exchange，提问作者Ufuk Ugur