CODEWITHSUNDEEP
htmlcss
Subin
Subin

Reputation: 386

Unable to fit an image inside div container

I am trying to showcase the image inside the div container, but unable to insert an image inside the div tag.

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
}
<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

I will attach the codepen link below for output reference: I want the image to fit inside the right side of the div (class="image")

link : https://codepen.io/subin_s/pen/oOKKoY?editors=1100

Upvotes: 4

Views: 385

Answers (4)

Abdul Basit
Abdul Basit

Reputation: 1382

Have a look into this

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
      background-size: cover;
    background-repeat: no-repeat;
}
<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

I am attaching the Codepen link to see example.

Upvotes: 5

Omer
Omer

Reputation: 3476

Adjust the image to height

I add this to the class="image"

min-width: 600px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

Because you set up the section height to 400px and you have ratio image, so you need to use more background properties like I listed above, and play with it.

I guess you want it to be like an ad with content and a picture, and if you want the width of the class image will stay 45%, its ok and it will be on the center and have no repeat.

I suggest you to play with the background properties and width and height for get what you want your ad to look like.

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
  min-width: 600px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

Upvotes: 0

Chif
Chif

Reputation: 840

Check if this solves your problem:

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:100%;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
  background-size:100% auto;
  background-repeat:no-repeat;
}
<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

Upvotes: 0

Clockwork Coder
Clockwork Coder

Reputation: 21

See if this fits your needs:

    * {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 50%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
  display: inline-block;
}

.image {
  width:40%;
  height:100%;
  display: inline-block;
}

#mockup {
  overflow: auto;
  max-height: 100%;
  
}
<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"><img src="https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg" alt="" id="mockup"></div>
</section>

Upvotes: 0

Related Questions