CSS - сделать изображение подходящим для div определенного размера - PullRequest
Новая
       1

CSS - сделать изображение подходящим для div определенного размера

0 голосов
/ 15 октября 2019 
<!DOCTYPE html>
<html>
<head>
<style>
img {
    max-width: 100%;
}
.d1 {
    background-color: green;
    padding: 5px;
    width: 300px;
    height: 100px;
}
</style>
</head>
<body>

<div class="d1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

</body>
</html>

Я использую приведенный выше простой код для отображения изображения внутри div определенного размера, но изображение не соответствует div и переполняется снизу ... Как это исправить? Ty

Ответы [ 3 ]

0 голосов
/ 15 октября 2019 

img {
    width: 100%;
    height: 100%;
}
.d1 {
    background-color: green;
    width: 300px;
    height: 100px;
}
0 голосов
/ 15 октября 2019 
img {
     width: 100%;
     height:100%;
}
.d1 {
    background-color: green;
    padding: 5px;
    width: 300px;
    height: 300px;
}

Начиная 100% ширины и высоты изображения, оно настраивается в соответствии с размером div, поэтому здесь я изменил высоту div, чтобы он выглядел правильно, но вы можете установить его в соответствии с вашими предпочтениями.

0 голосов
/ 15 октября 2019

Вы можете попробовать код: 

img {
    width: 100%;
    height: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...