Блог

Главная - Вопросы по программированию - Как сделать так, чтобы изображение выскакивало из div элементов (ЗАКРЫТО)

Как сделать так, чтобы изображение выскакивало из div элементов (ЗАКРЫТО)

#html #css

Вопрос:

Я сделал изогнутый div, который содержит мое имя, идентификатор и фотографию:

 .version2 {
    background-color: lightblue;
    display: flex;
    justify-content: space-evenly;
}

.version2 div {
    padding: 5px 0 5px 0;
    align-self: center;
}

#propic{
    border-radius: 100%;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyHeader</title>
    <link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
    <div class="version2">
        <div><strong>Name:</strong> Tahmin Ahmed </div>
        <div><strong>ID:</strong> 123456</div>
        <picture>
            <img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
        </picture>
    </div>
</body>
</html>

Я хочу, чтобы синий фон был лишь немного больше текста, а изображение выходило за пределы синего фона вниз. Что мне нужно добавить/удалить, чтобы достичь этого?
Вот как я хочу, чтобы это выглядело

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

1. Можете ли вы создать желаемый результат с помощью чего-то вроде краски, чтобы я мог понять, чего именно вы хотите?

2. как насчет использования transform: translateY(100px) в вашем образе?

3. Или минус нижняя маржа ?

4. Очевидно, мне пришлось установить фиксированную высоту своего рода для моего родительского div, чтобы получить желаемый эффект. Спасибо вам за альтернативные варианты. 😁

Ответ №1:

Это тот желаемый эффект, который вы ищете? Я только что добавил фиксированную высоту к вашему внешнему .version2 контейнеру:

 .version2 {
    background-color: lightblue;
    display: flex;
    justify-content: space-evenly;
    height: 2rem; /* added a fixed height */
}

.version2 div {
    padding: 5px 0 5px 0;
    align-self: center;
}

#propic{
    border-radius: 100%;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyHeader</title>
    <link rel="stylesheet" href="styles/stylesheet.css">
</head>
<body>
    <div class="version2">
        <div><strong>Name:</strong> Tahmin Ahmed </div>
        <div><strong>ID:</strong> 123456</div>
        <picture>
            <img id="propic" src="https://i.stack.imgur.com/av1Fi.png" alt="My Profile picture">
        </picture>
    </div>
</body>
</html>

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

1. Это именно то, что нужно! Спасибо!

Метки: ,