Блог

Главная - Вопросы по программированию - CSS для масштабирования изображения элемента img в соответствии с содержащимся элементом button

CSS для масштабирования изображения элемента img в соответствии с содержащимся элементом button

#html #css

#HTML #css

Вопрос:

Есть ли способ в CSS масштабировать изображение элемента img в соответствии с содержащимся элементом button?

В этом примере я хотел бы, чтобы изображение было сосредоточено на кнопке и масштабировалось соответствующим образом для размера кнопки. На самом деле они не масштабируются и не выровнены надлежащим образом.

 <html>
    <head>
        <title>Button img element scaling</title>
        <style type="text/css">
         div.container {
             display: flex;
             justify-content: center;
         }
         button {
             min-width: 20px;
             max-width: 20px;
             flex-basis: 20px;
             height: 20px;
         }
        </style>
    </head>
    <body>
        <div class="container">
            <button>
                <img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
            </button>
            <button>
                <img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
            </button>
        </div>
    </body>
</html>

Я считаю, что это возможно с использованием divs вместо элементов button, но я спрашиваю об элементах button (потому что семантически приятно, когда кнопка является кнопкой, и потому что кнопки, которые у меня есть, уже оформлены).

Я также считаю, что есть альтернативные способы приблизиться к этому, используя фоновые изображения, но поскольку здесь изображение не просто украшение, а имеет семантическое значение, я бы хотел использовать img (а позже добавить атрибут alt).

В примере используется flex, но проблема, похоже, не относится конкретно к этому.

Ответ №1:

отображение flex на самой кнопке, похоже, делает свое дело

 <html>
    <head>
        <title>Button img element scaling</title>
        <style type="text/css">
         div.container {
             display: flex;
             justify-content: center;
         }
         button {
             min-width: 20px;
             max-width: 20px;
             flex-basis: 20px;
             height: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
        </style>
    </head>
    <body>
        <div class="container">
            <button>
                <img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
            </button>
            <button>
                <img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
            </button>
        </div>
    </body>
</html>

Редактировать

если оно также должно увеличиться до размера кнопки, вы можете добавить width="100%" height="100%" к изображению, чтобы увеличить его.

это будет выглядеть так:

 <img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" width="100%" height="100%" />

Ответ №2:

Я думаю, вы могли бы использовать object-fit в вашем css ->https://www.w3schools.com/css/css3_object-fit.asp

Комментарии:

1. Я пробовал это; казалось, это сработало для элементов div, но не для элементов button