Inlineframe (iframe) in HTML skalieren/verkleinern?

Hallooo,

Ich möchte gerne ein Bild (https://www.abenteuer-sterne.de/sonnebild/sonnehalpha.jpg) mit einem HTML-Tool auf meine Website einbetten. Da das Bild etwas größer ist dachte ich mir nur "height=" und "width=" zu benutzen. Nach einer längeren Suche in einigen Foren bin ich nur noch verwirrt... Wir kann ich das Bild in eine abgerundete 340×340-Form "hineinpressen" ohne, dass nur ein Ausschnitt zu sehen ist und es tatsächlich nicht verkleinert wurde?

<style>
iframe {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
}
</style>
<iframe width="340" height="340" src="https://www.abenteuer-sterne.de/sonnebild/sonnehalpha.jpg" frameborder="0" scrolling="no"></iframe>

Vielen Dank im Voraus!

1 Antwort

Limearts

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

22.05.2021, 23:24

Gar nicht. Jedenfalls nicht ohne sehr viel Aufwand und die Voraussetzung dass der Zielserver dies überhaupt unterstützt.

Kurz gesagt: Du kannst die Größe des iFrame-Fensters anpassen und verändern wie es dir beliegt, der Inhalt ist aber so groß wie es die externe Quelle vorsieht. Und Du kannst diese Quelldaten von außen nicht mal eben verändern.

Gleichzeitig ist es absolut sinnlos eine Bilddatei per iFrame einzubinden. Dafür gibt es das img-Tag, auf das dann auch entsprechende Attribute angewandt werden können.

Unabhängig davon ist Hotlinking und speziell das Verwenden fremder Inhalte rechlich ein Problem für dich.

Woher ich das weiß:Berufserfahrung – selbstständiger Dienstleister und Nerd

Davewithoutcat

Fragesteller

22.05.2021, 23:27

Ah okay, danke! Wie geht das dann mit dem img-Tag?

Das mit dem Verwenden habe ich schon abgeklärt :D - aber ja, es wäre sonst ein Problem hehe

Limearts

22.05.2021, 23:28

@Davewithoutcat

<img src="pfadzurbilddatei.dateiendung" width="340" height="340" />

Davewithoutcat

Fragesteller

22.05.2021, 23:38

@Limearts

Danke! Wie funktioniert das dann mit den abgerundeten Ecken? Codes aus dem Internet funktionieren irgendwie nicht :/

Limearts

22.05.2021, 23:46

@Davewithoutcat

Du kannst allgemein im CSS allen Tags der Sorte img eine Eigenschaft zuweisen oder das Bild mit einer ID, besser Klasse versehen und auf diese anwenden.

<style>
img {
    border-radius: 20px;
}
</style>

In diesem Fall wird jede eingebundene Bilddatei der Definition unterworfen. Soll dies nur bei bestimmten zum Einsatz kommen, kann man dem Element eine Klasse zuweisen und es so unabhängig von anderen Definitionen gezielt ansprechen.

<style>
.gerundet {
    border-radius: 20px;
}
</style>

<img src="pfadzurbilddatei.dateiendung" width="340" height="340" class="gerundet" />

Die veralteten Browserspezifischen Definitionen -webkit-border-radius und -o-border-radius kannst Du dir bei der Gelegenheit auch sparen. Die definition border-radius wird seit gut einem Jahrzehnt nativ von allen gängigen Browsern berücksichtigt. Browser-spezifische Experimental-Defintionen sind da nicht mehr erforderlich. Vermutlich entstammen diese noch einem sehr alten Codebeispiel.

Ich habe momentan folgender Html Code in meiner Programmierung:

Ich möchte aber nur ein bestimmten Teil von der Website einblenden, kann mir jemand helfen?

...zur Frage

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zur Frage

HTML Iframe weiterleitung?

Guten Tag,

Ich schreibe gerade eine Webseite und wollte ein iframe einbauen doch wenn ich auf die Seite gehe wird die Seite nicht angezeigt sondern werde zur Webseite weitergeleitet. [CODER] <iframe src="http://www.exapmple.de width="400" height="400" style="float:right"></iframe>

...zur Frage

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zur Frage

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

HTML / CSS : Wie bei einem iFrame den YouTube-Balken unten weg bekommen?

Hier ist mein iFrame code ohne, dass der YouTuber Scroll Balken unten verschwindet.

</div>

Welchen Code muss ich hinzufügen, dass dieserverschwindet und man nicht vor- oder zurückspulen kann?

...zur Frage

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zur Frage

eigener HTML Code funktioniert nicht in normal - Was tun?

Ich habe meinen eigenen Code geschrieben (siehe unten). Wenn ich ihn im TryIt Editor von w3schools mache, dann geht er, aber wenn ich die Datei mit demselben Code öffne nicht. Was tun?

P. S. was nicht funktioniert ist das iframe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
	<TITLE></TITLE>
	<META NAME="GENERATOR" CONTENT="OpenOffice 4.1.5  (Win32)">
	<META NAME="CREATED" CONTENT="20190813;12185098">
	<META NAME="CHANGED" CONTENT="20190813;12281423">
</HEAD>
<BODY LANG="de-DE" DIR="LTR">
<P><FONT FACE="Impact, sans-serif"><FONT SIZE=7 STYLE="font-size: 80pt">Start
| <A HREF="../../../Programme/CookieGames/Shortcut">My Games</A> |
<A HREF="https://www.cookie-games.com/account/ich">Profile</A> | Info</FONT></FONT></P>
    <iframe src="https://www.cookie-games.com" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="https://www.cookie-games.com"> click here to view the page directly. </a></iframe>
<P><BR><BR>
</P>
</BODY>
</HTML>

...zur Frage

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zur Frage

Wie verhinder ich die Download Funktion?

Ich habe ein Video eingebettet auf meiner Website aber wenn ich es starte, kann es jeder herunterladen. Gibt es in diesem Code (oder in einem anderen) die Möglichkeit, den Download Button zu deaktivieren?

Code:

...zur Frage

html/css box neben box bekommen?

Bekomme mit diesem code meine box in die andere box. will sie aber ausserhalb der box haben:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Spezialitäten</title>
<meta charset="UTF-8"/>
<style type="text/css">
h1 {
font-size: 80px;
text-align: left;
color: red}
.hauptbox {
background-image: url(1783.jpg);
background-size: cover;
width: 1500px;
height: 600px;
border: solid;
}
.banner {
height: 200px;
border: solid;
margin: 25px;
width: 1450px;
}
.link {
width: 206px;
height: 300px;
border: solid;
float: right;
color: white;
A:active {color:red};
}
</style>
</head>
<body bgcolor="lightblue">
<div class="hauptbox">
<div class="banner">
<h1>Gdddd</h1>
</div>
<div class="link"
<a name="suche"><h4>Zurück zum Anfang</h4></>
</body>
</html>

...zur Frage

wie kann ich ein Bild nach rechts verschieben HTML?

Wie kann ich zwischen den beiden Bildern einen Abstand lassen bzw das 2 Bild nach rechts verschieben?

der HTML CODE:

</iframe>

Beide haben den gleichen quellcode alsooben 2x habe ich es eingefügt in der website

...zur Frage

Wie kann man eine Lightbox in einem iframe öffnen ohne Begrenzung des iframe?

Ich habe z.B. einen iframe mit height="400px" und width="100%". Darin befindet sich ein Element, dass per Klick eine Lightbox auf Fullscreen öffnet. Beides befindet sich auf der selben Domain/Server.

Leider öffnet die Lightbox nicht auf Fullscreen, sondern wird vom Rand des Bereiches (400px / 100%) begrenzt. Wie kann es über die Ränder hinaus gehen (fullscreen)?

PS: Das iframe möchte ich nicht auf Fullscreen einstellen, weil ich mehrere iframes untereinander haben möchte.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen