CSS iframe - poradna.net

Zdravím, mám takový požadavek abych čtyři html stránky na kterých jsou jen obrázky z jídelníčku vložil do jedné stránky jako náhledy.
Zkusil jsem to přes iframe a udělal tabulku 2x2:

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aramark</title>
<link rel="stylesheet" type="text/css" href="mojecss.css">
</head>
<body id="aramark">
<table>
	<tr>
		<td><iframe src="http://menu.aramark.cz/screens2/577/1" ></iframe></td>
		<td><iframe src="http://menu.aramark.cz/screens2/577/2"></iframe></td>
		
	</tr>	
	<tr>
		<td><iframe src="http://menu.aramark.cz/screens2/577/3"></iframe></td>
		<td><iframe src="http://menu.aramark.cz/screens2/577/4"></iframe></td>
	</tr>
</body>
</html>

CSS:

body#aramark{
	background-color: white;
	overflow: hidden;
}	

iframe {
    width: 500px;
    height: 500px;
   
}

Výsledek je že mám náhledy 2x2obrázků v iframech, problém je, že potřebuji, aby se ty náhledy prizpůsobily tomu oknu iframu. Teď vidím jen část obrázku v jednotlivých iframech.

Předmět	Autor	Datum
No celé bych to spravil asi kus jinak, veľkosti prvkov v iframu sa "ťažšie" "prispôsobujú", kedže ch… Mlocik97 20.03.2018 12:32	Mlocik97	20.03.2018 12:32
Díky za odpověď, můžu poprosit jak bych to konkrétně přizpůsobil na můj případ. Takže mám vyhodit ta… rambic 20.03.2018 12:48	rambic	20.03.2018 12:48
iframy vnorovať do tabulky je iba zbytočné sťaženie (ale jde to i cez tabulky, ja bych to ale tak ne… Mlocik97 20.03.2018 13:17	Mlocik97	20.03.2018 13:17
Zkoušel sem ten scale, ale docílím jen toho, že mi zůstane původní velké okno a v něm se mi zmenší t… poslední rambic 21.03.2018 08:56	rambic	21.03.2018 08:56

No celé bych to spravil asi kus jinak, veľkosti prvkov v iframu sa "ťažšie" "prispôsobujú", kedže chcete zmeniť zobrazenie prvkov ktoré nie sú na Vašej stránke... Ak už to chcete zoskladať zo 4 iframov, tak bych doporučil používať margin a padding a (viď link na stack overflow):

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

https://stackoverflow.com/questions/32490167/automatically-scale-resize-image-in-an-iframe

Díky za odpověď, můžu poprosit jak bych to konkrétně přizpůsobil na můj případ.
Takže mám vyhodit table, místo toho řešit odsazení jednotlivých iframů?

iframy vnorovať do tabulky je iba zbytočné sťaženie (ale jde to i cez tabulky, ja bych to ale tak neriešil),... pre rozmiestenie bych využil pozicovaní a/alebo obtékaní...

Zkoušel sem ten scale, ale docílím jen toho, že mi zůstane původní velké okno a v něm se mi zmenší ten obrázek z iframu.

Zpět do poradny Odpovědět na původní otázku Nahoru