CodeSolved

A comprehensive source of programming questions and exercises

Inserting the Rispanso image on the page

Practice Easy 183/ Download 281 Views

Insert a video on the page using HTML and CSS with the following features

Image address
Be the text of the image (codec)
The width of the image is always 90 % width but do not exceed 400 pixels.
The image always place in the middle of the screen (from left and right)

4 Answers

C S S__________________
 img{
   display: block;
   margin: auto;
   width: 90vw;
   min-width: 100px;
   max-width: 400px;}                   

H T M L_________________
  <img src="https://code-bezan.ir/static/image/logotype.png" alt="کد بزن">
Unun..ali..nunu Download HTML & CSS

The Professional Answer Unun..ali..nunu 

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های خاص</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="https://via.placeholder.com/800" alt="کدبزن" class="responsive-image">
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; # To center the content
    align-items: center; # To center vertical
    height: 100vh; # 100 % plate height
}

.image-container {
    width: 100%; # Full width of the page
    max-width: 400px; # Maximum width of 400 pixels
    min-width: 100px; # Minimum width of 100 pixels
    text-align: center; # Center
}

.responsive-image {
    width: 90%; # Image width 90 % width of the page
    height: auto; # Preserving the aspect ratio of the image
}
User 136 Download HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های مشخص</title>
    <style>
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px; # Distance from top and bottom
        }

        img {
            width: 90%; # Image width 90 % width of the page
            max-width: 400px; # Maximum width of 400 pixels
            min-width: 100px; # Minimum width of 100 pixels
            height: auto; # Maintain the image ratio
        }
    </style>
</head>
<body>

<div class="image-container">
    <img src="آدرس_تصویر_اینجا" alt="کدبزن">
</div>

</body>
</html>
User 136 Download HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های مشخص</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="your-image-url.jpg" alt="کدبزن" class="responsive-image">
    </div>
</body>
</html>
Arman.danyy Download HTML & CSS

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

I can't solve this exercise 😞

If you don’t understand the exercise or can’t solve it for any reason, that’s completely normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer might be correct even if it’s different from others.

Close