nicht angemeldet
Bild soll sich Monitorgrösse anpassen, inkl. query und cycle
Der Martin
suitIch möchte das sich das Bild atomatisch der Grösse des Monitors anpasst.
Es klappt zwar wenn man den Browser vergössert oder verkleinert und dann RELOAD macht, aber es sollte eigentlich automatisch sein, wenn man den Brwoser verkleiner bzw. vergrössert.
Nicki
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { width: 100%;}
.slideshow img { width: 100%; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="images1.jpg" alt="">
<img src="images2.jpg" alt="">
</div>
</body>
</html>
-
Hallo Nicki,
was du benötigst sind responsive Bilder. Es gibt viele Wege das zu erreichen. Ich bevorzuge dafür die Clown Car Technique.
Gruß
Ole-
Es muss doch möglich sein, das einfacher zu lösen.
Wenn man ein einziges Bild hat#images{
background: url(images1.jpg) no-repeat;
background-size: 100% auto;
}geht es ja auch.
Kann man nicht irgendwie diese Anweisung auch für ein IMG realisieren!img{
background-size: 100% auto;
}Ab so geht es leider überhaupt nicht
Nicki
Hallo Nicki,
was du benötigst sind responsive Bilder. Es gibt viele Wege das zu erreichen. Ich bevorzuge dafür die Clown Car Technique.
Gruß
Ole-
Meine Herren,
#images{
background: url(images1.jpg) no-repeat;
background-size: 100% auto;
}geht es ja auch.
Kann man nicht irgendwie diese Anweisung auch für ein IMG realisieren!img{
background-size: 100% auto;
}Das Bild, wenn es als HTML-Element notiert ist, ist ja nicht teil des Hintergrund Bildes.
img { width: 100%; height: auto; }sollte funktionieren. Welches Verhalten erwartest du und welches Verhalten hast du stattdessen? "Funktioniert nicht" ist keine gute Fehlerbeschreibung.
-
img {
width: 100%;
height: auto;
}Das Bild passt sich der momentanen Browsergröße an. Wenn ich aber den Browser vergrößere, bleibt das Bild stehen. Erst wenn ich ein Relaod der Seite mache, passt es sich wieder an die Browsergröße an. Das gleiche ist wenn ich den Browser verkleinere. Das Bild bleibt. Erst wenn ich relaod mache passt sich das Bild wieder an.
Ich würde aber gerne haben, das es sich mit dem vergrößern des Browserfensters immer dem Browser anpasst.Nicki
-
Meine Herren,
img {
width: 100%;
height: auto;
}Das Bild passt sich der momentanen Browsergröße an. Wenn ich aber den Browser vergrößere, bleibt das Bild stehen. Erst wenn ich ein Relaod der Seite mache, passt es sich wieder an die Browsergröße an. Das gleiche ist wenn ich den Browser verkleinere. Das Bild bleibt. Erst wenn ich relaod mache passt sich das Bild wieder an.
Dann machst du was falsch.
Ich würde aber gerne haben, das es sich mit dem vergrößern des Browserfensters immer dem Browser anpasst.
Der oben stehende Code funktioniert so, wie von dir gewünscht: http://jsfiddle.net/1UnitedPower/TN9Nb/
-
Dann machst du was falsch.
Das glaube ich sofort. Wenn ich nur wüsste was....
hier mal die ganze Testseite die ich habe....
<!DOCTYPE html> <html> <head> <title>JQuery Cycle Plugin - Basic Demo</title> <style type="text/css"> .slideshow { background:#ff0000; } .slideshow img { width: 100%; height: auto; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div class="slideshow"> <img src="image1.jpg" alt=""> </div> </body> </html>-
Hallo,
Dann machst du was falsch.
Das glaube ich sofort. Wenn ich nur wüsste was...setzt eines deiner zahlreichen Scripts vielleicht die Breite des Bildes durch direkte Zuweisung an das style-Objekt des Bildes? Denn Zuweisungen an element.style.property haben Vorrang vor allen anderen CSS-Eigenschaften und setzen damit Angaben aus dem Stylesheet außer Kraft.
Ciao,
Martin--
Kennst du ein eisenhaltiges Abführmittel mit zwölf Buchstaben? - Handschellen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Martin du hattest Recht da fehlte eine Anweisung:
Jetzt gehts fast... Die Breite funzt jetzt, doch ich muss noch irgendnwie die Höhe der jeweiligen Breite anpassen, die jetzt auf 500px steht.
ich habs schon mit height:auto; versucht, aber das war leider nichts.<!DOCTYPE html> <html> <head> <title>JQuery Cycle Plugin - Basic Demo</title> <style type="text/css"> .slideshow { width: 100%; height: 500px; background-size: cover; } .slideshow img { width: 100%; height: 500px; background-size: cover; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ slideResize: false, fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div class="slideshow"> <img src="images1.jpg" alt=""> </div> </body> </html>
-
-
-
-
-
-
-
-
Du solltest auf den Nachfolger des Cycle-Plugins migrieren http://jquery.malsup.com/cycle2/ (Cycle2 ist "neuer" und leistungsfähiger als Cycle 3.x) - der vorteil ist vor allem, dass dort Spielereien wie eben Responsive-Slideshows schon im Auslieferungszustand mitgebracht werden.