更改 iframe src 的寬度

Question

我有這個iframe

 * { margin: 0; padding: 0; } body { background-color: #F2EEE9; font: normal 13px/1.5 Georgia, Serif; color: #333; } .wrapper { width: 705px; margin: 20px auto; padding: 20px; } h1 { display: inline-block; background-color: #333; color: #fff; font-size: 20px; font-weight: normal; text-transform: uppercase; padding: 4px 20px; float: left; } .clear { clear: both; } .items { display: block; margin: 20px 0; } .item { background-color: #fff; float: left; margin: 0 10px 10px 0; width: 205px; padding: 10px; height: 290px; } .item img { display: block; margin: auto; width: 100%; height: 50%; } h2 { font-size: 16px; display: block; border-bottom: 1px solid #ccc; margin: 0 0 10px 0; padding: 0 0 5px 0; } button { border: 1px solid #722A1B; padding: 4px 14px; background-color: #fff; color: #722A1B; text-transform: uppercase; float: right; margin: 5px 0; font-weight: bold; cursor: pointer; } span { float: right; } .shopping-cart { display: inline-block; background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0; width: 24px; height: 24px; margin: 0 10px 0 0; } @import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700); @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic); /* Override UGG site */ #main {width: 100%; padding:0;} .content-asset p {margin:0 auto;} .breadcrumb {display:none;} /* Helpers */ /**************************/ .margin-top-10 {padding-top:10px;} .margin-bot-10 {padding-bottom:10px;} /* Typography */ /**************************/ #parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; padding:0; margin:0;} #parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;} #parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;} #parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;} .first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;} .sc {color: #3b8595;} .ny {color: #3d3c3a;} .atw {color: #c48660;} /* Section - Title */ /**************************/ #parallax-world-of-ugg .title {background:white; padding: 60px; margin:0 auto; text-align:center;} #parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;} /* Section - Block */ /**************************/ #parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;} #parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;} #parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;} /* Section - Parallax */ /**************************/ #parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1593642702909-dec73df255d7?ixid=MXwxMjA3fDF8MHxzZWFyY2h8MXx8dGVjaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;} #parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1432163230927-a32e4fd5a326?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;} #parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;} /* Extras */ /**************************/ #parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;} /* Media Queries */ /**************************/ @media screen and (max-width: 959px) and (min-width: 768px) { #parallax-world-of-ugg .block {padding: 40px; width:620px;} } @media screen and (max-width: 767px) { #parallax-world-of-ugg .block {padding: 30px; width:420px;} #parallax-world-of-ugg h2 {font-size:30px;} #parallax-world-of-ugg .block {padding: 30px;} #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;} } @media screen and (max-width: 479px) { #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;} }

 <div class="items"> <!-- single item --> <div class="item"> <iframe src="https://www.linkpicture.com/q/Screen-Shot-2021-07-08-at-3.17.34-PM.png" style=" width: 100%; height: 50%; display:block; background-size: cover; border-radius: 8px 0 0 8px;"></iframe> <h2><%= data[i].CHILDNAME %></h2> <p><%= data[i].FIRSTNAME %> <%= data[i].LASTNAME %></em> </p> <form action="/myChildFile" method="GET"> <input type="hidden" name="childName" value="<%= data[i].CHILDNAME %>"> <input type="hidden" name="report" value="<%= data[i].REPORT1 %>"> <button class="add-to-cart" type="submit">VIEW REPORT</button> </form> </div> </div>

正如您在上面運行時看到的那樣，iframe 內的圖像太寬了。 我相信這與 CSS 中一項的寬度有關。 我不知道如何解決這個問題。 有任何想法嗎？

Answer 1

這個問題的答案顯示了如何使用transform和transform-origin調整 iframe 內容的大小，但您需要使用絕對寬度：

 iframe { -moz-transform: scale(0.25, 0.25); -webkit-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); transform-origin: center top; width: 500px; height: 400px; } * { margin: 0; padding: 0; } body { background-color: #F2EEE9; font: normal 13px/1.5 Georgia, Serif; color: #333; } .wrapper { width: 705px; margin: 20px auto; padding: 20px; } h1 { display: inline-block; background-color: #333; color: #fff; font-size: 20px; font-weight: normal; text-transform: uppercase; padding: 4px 20px; float: left; } .clear { clear: both; } .items { display: block; margin: 20px 0; } .item { background-color: #fff; float: left; margin: 0 10px 10px 0; width: 205px; padding: 10px; height: 290px; } .item img { display: block; margin: auto; width: 100%; height: 50%; } h2 { font-size: 16px; display: block; border-bottom: 1px solid #ccc; margin: 0 0 10px 0; padding: 0 0 5px 0; } button { border: 1px solid #722A1B; padding: 4px 14px; background-color: #fff; color: #722A1B; text-transform: uppercase; float: right; margin: 5px 0; font-weight: bold; cursor: pointer; } span { float: right; } .shopping-cart { display: inline-block; background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0; width: 24px; height: 24px; margin: 0 10px 0 0; } @import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700); @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic); /* Override UGG site */ #main {width: 100%; padding:0;} .content-asset p {margin:0 auto;} .breadcrumb {display:none;} /* Helpers */ /**************************/ .margin-top-10 {padding-top:10px;} .margin-bot-10 {padding-bottom:10px;} /* Typography */ /**************************/ #parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; padding:0; margin:0;} #parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;} #parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;} #parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;} .first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;} .sc {color: #3b8595;} .ny {color: #3d3c3a;} .atw {color: #c48660;} /* Section - Title */ /**************************/ #parallax-world-of-ugg .title {background:white; padding: 60px; margin:0 auto; text-align:center;} #parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;} /* Section - Block */ /**************************/ #parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;} #parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;} #parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;} /* Section - Parallax */ /**************************/ #parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1593642702909-dec73df255d7?ixid=MXwxMjA3fDF8MHxzZWFyY2h8MXx8dGVjaHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;} #parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1432163230927-a32e4fd5a326?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;} #parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;} /* Extras */ /**************************/ #parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;} /* Media Queries */ /**************************/ @media screen and (max-width: 959px) and (min-width: 768px) { #parallax-world-of-ugg .block {padding: 40px; width:620px;} } @media screen and (max-width: 767px) { #parallax-world-of-ugg .block {padding: 30px; width:420px;} #parallax-world-of-ugg h2 {font-size:30px;} #parallax-world-of-ugg .block {padding: 30px;} #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;} } @media screen and (max-width: 479px) { #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;} }

 <div class="items"> <!-- single item --> <div class="item"> <iframe src="https://www.linkpicture.com/q/Screen-Shot-2021-07-08-at-3.17.34-PM.png" style=" display:block; background-size: cover; border-radius: 8px 0 0 8px;"></iframe> <h2><%= data[i].CHILDNAME %></h2> <p><%= data[i].FIRSTNAME %> <%= data[i].LASTNAME %></em> </p> <form action="/myChildFile" method="GET"> <input type="hidden" name="childName" value="<%= data[i].CHILDNAME %>"> <input type="hidden" name="report" value="<%= data[i].REPORT1 %>"> <button class="add-to-cart" type="submit">VIEW REPORT</button> </form> </div> </div>