CODEWITHSUNDEEP
htmlcss
Exclusive_Dosser
Exclusive_Dosser

Reputation: 21

Size of an images and text in html

I can't fit my page to resolution of screen. I have 1920x1080, image is 1920 px width and it is going out of a window. link with code and images: https://mega.nz/file/rPJB2aCZ#OY7vW1yFZ-d0Fb73UvYvw8D-1NEnSmSV5XSA-Dw0LPU index1.html and style1.css are unnecessery.

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
   <style>
    
    </style>
</head>
<body>
<div class="container1">
    <img style="width: 100%" src="../img/Zrzut ekranu 2021-10-18 o 15.21.01.png">
    <p class="text1">
        <b>Opanuj stres i przejmij kontrolę<br>
            w biznesie i życiu prywatnym!</b>
    </p>
    <p class="text2">
        <b>Poznaj techniki koherencji w trakcie spotkań<br>
            jeden na jeden i zapanuj nad swoim stresem.</b>
    </p>
    <button class="button1">
        <b>Zapisz się na kurs</b>
    </button>
    <button class="button2">
        <b>O mnie</b>
    </button>
</div>
</body>
</html>


.text1 {
    position: relative;
    font-family: Ubuntu;
    font-size: 70px;
    margin: 0;
    color: white;
}
.text2 {
    position: relative;
    font-family: Ubuntu;
    font-size: 25px;
    margin: 0;
    color: white;
}
.button1 {
    position: relative;
    background-color: #D32A34;
    color: white;
    border: none;
    width: 239px;
    height: 71px;
    font-size: 20px;
}
.button2 {
    position: relative;
    border: solid #D32A34;
    color: white;
    background-color: transparent;
    width: 239px;
    height: 71px;
    font-size: 20px;
}

Upvotes: 0

Views: 88

Answers (5)

Apps Maven
Apps Maven

Reputation: 1420

Use this style into your stylesheet to remove the spacing between the image and box-sizing "body {padding:0;margin:0;} "

Upvotes: 0

Laaouatni Anas
Laaouatni Anas

Reputation: 3885

normal image responsive

here a online exercise, if you want to learn how to make an image responsive: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

.container1 img {
    max-width: 100%;
    height: auto;
}

if you want an image as a background

use this in your img selector

.container1 img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

the height is 100vh so 100% of all height of the device, also if the parent his width is less height.
the same with 100vw

object-fit make the image look good on all device, to matter the aspect ratio of the device

position: fixed is for make the image like a background

z-index for making the image go behind everything

.container1 img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.text1 {
  position: relative;
  font-family: Ubuntu;
  font-size: 70px;
  margin: 0;
  color: white;
}

.text2 {
  position: relative;
  font-family: Ubuntu;
  font-size: 25px;
  margin: 0;
  color: white;
}

.button1 {
  position: relative;
  background-color: #D32A34;
  color: white;
  border: none;
  width: 239px;
  height: 71px;
  font-size: 20px;
}

.button2 {
  position: relative;
  border: solid #D32A34;
  color: white;
  background-color: transparent;
  width: 239px;
  height: 71px;
  font-size: 20px;
}
<!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>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container1">
    <img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
    <!-- text 1 -->
    <p class="text1">
      <b>Opanuj stres i przejmij kontrolę
                <br>
                w biznesie i życiu prywatnym!
            </b>
    </p>
    <!-- text 2 -->
    <p class="text2">
      <b>Poznaj techniki koherencji w trakcie spotkań
                <br>
                jeden na jeden i zapanuj nad swoim stresem.
            </b>
    </p>
    <!-- button 1 -->
    <button class="button1">
            <b>Zapisz się na kurs</b>
        </button>
    <!-- buttton 2 -->
    <button class="button2">
            <b>O mnie</b>
        </button>
  </div>
</body>

</html>

Upvotes: 1

OmOursPor
OmOursPor

Reputation: 14

if you use 100vw(view width) instead 100% for your img and set all margin and padding to 0, like that:

* {
    margin: 0;
    padding: 0;
}

Upvotes: 0

Bartłomiej Raszpla
Bartłomiej Raszpla

Reputation: 11

At first you should style your .container1 or body and give it a width of 100% or 100vw. Pixels doesn't work probably because some width of the screen is reserved for scroll. Pozdro

Upvotes: 0

alexdbejenaru
alexdbejenaru

Reputation: 1

Try changing 'width: 100%' to 'width: 100vw' (which means viewport width)

Upvotes: 0

Related Questions