CODEWITHSUNDEEP
htmlcssiframe
Shri
Shri

Reputation: 752

CSS height property resizes iframe wrong

I'm having this Page, Where an iframe is supposed to load. The frame is of size 1024x768. But for some reason, the frame loads very small (Probably a 300x200). My code currently looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" href="./design.css">

    <style>
    .edetail_frame {
      border-radius: 25px;
        height: 1024;
        width:768;
        display:inline-block;
        overflow: hidden;
        box-shadow: 5px 5px 7px  rgba(0, 0, 0, 0.2);
    }

</style>
</head>
<body>

<h3 style ="font-family:Open Sans">SlideShow</h3>

<div class="col-sm-10 ">
<div class="row fill-height">
<div class="edetail_frame" style="flex-basis: 700px">

<iframe src="frame.html" frameborder="0" id="edetail_frame" scrolling="no"></iframe></div>
</div></div></div>
</body>
</html>

Upvotes: 2

Views: 444

Answers (2)

Awais
Awais

Reputation: 4902

Try to use #id of iframe rather then using class to target 

#edetail_frame{
        border-radius: 25px;
        height: 1024px;
        width:768px;
        display:inline-block;
        overflow: hidden;
        box-shadow: 5px 5px 7px  rgba(0, 0, 0, 0.2);
}

If using class then

.edetail_frame {
      border-radius: 25px;
        height: 1024px;
        width:768px;
        display:inline-block;
        overflow: hidden;
        box-shadow: 5px 5px 7px  rgba(0, 0, 0, 0.2);
    }
.edetail_frame iframe{
        height: 100%; 
        width: 100%;
}

Don't forget to use units of your dimension like px em etc

Upvotes: 1

Nova
Nova

Reputation: 364

Should put the width and height directly in in the iframe tag

<iframe src="frame.html" frameborder="0" id="edetail_frame" width="768" height="1024" scrolling="no"></iframe></div>

If you want to use css, you need to put px

Upvotes: 3

Related Questions