Anki - Bild zentrieren bei maximaler Größe

Hallo,

ich verwende eine Lernkartei-Software, die Anki heißt. Die Gestaltung der Karten basiert auf CSS und HTML,
wo ich mich allerdings überhaupt nicht auskenne.

Ich hab's immerhin geschafft die "Grundkonfiguration" dahingehend zu verändern, daß Text, wenn ich Anki
im Vollbildmodus verwende, nicht über die ganze Seite läuft, sondern als Block dargestellt wird.

Das sieht folgendermaßen aus:

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;




 margin-left: auto;
 margin-right: auto;
 width: 500px;
}

Diese Zeile verwende ich, um die Größenbegrenzung von Bildern aufzuheben bzw. auszuwählen:

img {max-width: 1300px; max-height: 1300px;}

Das funktioniert aber nur, wenn ich den Code nach der geschwungenen Klammer einfüge.

Mein Problem ist nun folgendes: Die Bilder überschreiten rechts die 500 Pixel-Grenze, sind aber links bündig mit dem Text.
Das heißt, wenn ich ein größeres Bild in eine Karte einfüge, dann ist es leider nicht mittig sondern nach rechts hin verschoben.

Kann mir da jemand bitte weiterhelfen?

Hi,

erstmal danke für Deine Antwort.

Grundsätzlich kann ich bei Anki (dem Lernprogramm) immer standardmäßig Bilder hinzufügen. Das wird jetzt ein bißchen kompliziert …

Es gibt unterschiedliche "Notiztypen" anhand derer Karteikarten erstellt werden. Der Notiztyp ist quasi die Vorlage für viele Karteikarten. Die Formatierung
der Karteikarten kann man also verändern indem man den Notiztyp bearbeitet, und zwar durch Hinzufügen von Befehlen in Form von Code.

Das ist, glaube ich, der Originalcode:

.card { font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

Da war's schon problemlos möglich innerhalb der Karteikarten Bilder hinzuzufügen.

Ich hab dann vor ein paar Wochen dem Notiztyp diese Zeilen hinzugefügt, damit ich im Vollbildmodus eine schönen mittigen Textblock habe:

margin-left: auto;
margin-right: auto;
width: 500px;

Das Resultat war, daß nun die Bilder ebenfalls auf diese Breite beschränkt wurden.

Jetzt suche ich eben nach einer Möglichkeit die Bilder größer darstellen zu lassen als den Textblock.

Wesentlich ist für dich vielleicht die Info, daß im Bearbeitungsbereich des Notiztyps sozusagen "Einstellungen" durch hinzufügen von Code
vorgenommen werden können, die das darunterliegende, das darunterlaufende Programm beeinflussen - wenn ich das richtig sehe -, und daß
da keine Website z. B. erstellt wird.

Ich hab schon versucht mich im Anki-Forum schlau zu machen, aber da meinte der Entwickler, daß er mir bezüglich HTML/CSS leider keinen Support bieten kann …

Ansonsten … Falls es noch notwendig ist, möchte ich dennoch deine Fragen beantworten: Das Bild möchte ich über oder unter dem Textblock einfügen können,
je nachdem, und es sollte auf jeden Fall zentriert sein.

Die Bilder sind ganz unterschiedlich groß und sollten die maximale Größe von 1300px nicht überschreiten. Wenn sie kleiner sind können sie so bleiben, sollten
sie größer sein als 1300px hätte ich sie gerne automatisch zurechtgestutzt.

Je nach Lerninhalt suche ich mir Bilder aus dem Netz, die ich dann meiner Karteikarte hinzufüge, um den Lernprozeß zu verbessern. Daher fällt die Größe
der Bilder ganz unterschiedlich aus. Wenn ich diese Zeile im Notiztyp hinzufüge

img {max-width: 1300px; max-height: 1300px;}

funktionert die Darstellung in der Originalgröße und das automatische Zurechtstutzen, bloß die Zentrierung haut nicht hin …

Der Code, den Du mir freundlicherweise empfohlen hast, funktioniert leider auch nicht. Das Bild ist weiterhin quasi nach rechts verschoben und links
auf derselben Höhe wie der Text. (Übrigens nur wenn ich die Zeile "width: 100%;" entferne. Lasse ich sie drin, wird das Bild nur so breit wie der Text.)

Also ich hab erst mal diese Seite hier gefunden:

https://blog.stefanmoosmann.de/anki-flashcard-teil-16/

Da steht unter anderem:

Zitat

<div></div> erzeugt einen sogenannten Container, wird in Anki als Absatz gehandhabt, damit könnt ihr ganze Bereiche formatieren

Also das scheint in die richtige Richtung zu gehen.

Das Bild hat jetzt die richtige Größe und ist zentriert. Aber der Text paßt jetzt nicht mehr, der ist zu breit.

Mal schauen, ob ich das richtig gemacht habe:

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}




<div>
 margin-left: auto;
 margin-right: auto;
 width: 500px;
</div>




div {
margin: 0 auto;
width: 500px;
}




img {
display: block;
max-width: 1300px;
margin: 0 auto;
}

So sieht das ganze jetzt bei mir aus.

Okay, jetzt verstehe ich. Mit "... hier dein Text …" meintest du natürlich den Text für die Karte.

So, also ich habe jetzt den <div>-Part gelöscht. Ich kann mit den Formaten auf <div> zugreifen. Er hat die richtige Breite und der Text wird rot .

Das Problem: Das Bild verliert die Zentrierung …

Noch eine Info. Für das Bearbeiten der Karten stehen mir drei Bereiche zur Verfüfung:

1. Vorlage für Vorderseite

2. Stil (für alle Karten dieses Notiztyps) [CSS]
3. Vorlage für Rückseite [code=html]




Ich bin jetzt immer davon ausgegangen, daß bloß der 2. Bereich relevant ist.


Der 1. Bereich enthält jetzt das da:


[CODE]<div>
{{Front}}
</div>

Wobei {{Front}} dem Feld entspricht in das man den Text für die Karte eingibt.

Was du da geschrieben hast, hat mich auf eine Idee gebracht. Man kann in Anki neue Felder kreieren.

Jetzt habe ich ein Feld eigens nur für Bilder gemacht, so daß die Kartenvorlage nun folgenderweise strukturiert ist:

<div>
{{Front}}
</div>
<br>
<br>
<br>
{{Front Image}}

Ich werde also in Zukunft meine Bilder separat vom Text hinzufügen, was eh vorteilhaft ist und Sinn macht. Hat aber
jetzt nach längerem herumprobieren vorerst auch nichts gebracht.

Dann habe ich nochmal in der Bedienungsanleitung nachgelesen, in der zum einen darauf hingewiesen wird, daß man
auch unabhängig vom CSS-Bereich das Design einzelner Felder über HTML ändern kann, und daß Anki gemäß
Voreinstellung Bilder verkleinert, damit sie auf den Bildschirm passen - daher auch der Hinweis in der Anleitung
auf diese Zeile "img {max-width: none; max-height: none;}" für jene, die diese Einstellung deaktivieren wollen …

Vielleicht eröffnet das ja neue Möglichkeiten?

Den Quellcode kann ich dir leider nicht liefern, da Anki mit der Funktion "Quellcode anzeigen" offenbar nicht
ausgestattet ist. Ich konnte da zumindest nichts entdecken und hab erst vor ein, zwei Wochen die gesamte
Bedienungsanleitung gelesen.

Herzlichen Dank auf jeden Fall.

Ein wenig bin ich ja weitergekommen, und mal sehen, ob die Ideen fruchten.

Hallo noch mal!

Ich habe eine Anki-Erweiterung entdeckt, mit der ich den Quellcode anzeigen kann!

Vielleicht kannst du mir noch ein wenig helfen?

<html class=" webkit safari linux js">
<head>




<style>
button {
font-weight: normal;
}




hr { background-color:#ccc; margin: 1em; }
body { margin:1.5em; }
img { max-width: 95%; max-height: 95%; }
.marked { position:fixed; right: 7px; top: 7px; display: none; }
#typeans { width: 100%; }
.typeGood { background: #0f0; }
.typeBad { background: #f00; }
.typeMissed { background: #ccc; }




.card input
{
    background-color:black!important;
    border-color:#444!important;
    color:#eee!important
}
.typeGood
{
    color:black;
    background:#57a957
}
.typeBad
{
    color:black;
    background:#c43c35
}
.typeMissed
{
    color:black;
    background:#ccc
}
#answer
{
    height:0;
    border:0;
    border-bottom: 2px solid #333;
    border-top: 2px solid black
}
img#star
{
    -webkit-filter:invert(0%)!important
}
.cloze
{
    color:#5566ee!important
}
a
{
    color:#0099CC
}
.card {    color:#00aaff!important;background-color:#272828!important}font[color='#000000']{color:white!important}</style>




<base href="file:///home/bullitt/.local/share/Anki2/bullitt/collection.media/">




</head>
<body class="card card1 night_mode">
<img src="qrc:/icons/rating.png" id="star" class="marked" draggable="false" style="display: none; ">
<div id="qa"><style>.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}




div {
margin: 0 auto;
width: 500px;
}




img {
display: block;
max-width: 1300px;
margin: 0 auto;
}</style><br>
<br>
<br>
<div>
Die … ist eine Takelungsart von Segelschiffen, die vermutlich im <font color="#ff5500">17. Jahrhundert</font> entstand und in der <font color="#ff5500">ersten Hälfte des 20. Jahrhunderts</font> weitgehend durch die … abgelöst wurde.<div><br></div><div>Da es in der Längsrichtung des Schiffes gesetzt wird, zählt es zu den Schratsegeln.</div>
</div>
<br>
<br>
<br>
<span style="color: rgb(0, 170, 255)"><img src="Gaffeltakelung.JPG" draggable="false"></span>
<br>
</div>
<script>
var ankiPlatform = "desktop";
var typeans;
function _updateQA (q, answerMode, klass) {
    $("#qa").html(q);
    typeans = document.getElementById("typeans");
    if (typeans) {
        typeans.focus();
    }
    if (answerMode) {
        var e = $("#answer");
        if (e[0]) { e[0].scrollIntoView(); }
    } else {
        window.scrollTo(0, 0);
    }
    if (klass) {
        document.body.className = klass;
    }
    // don't allow drags of images, which cause them to be deleted
    $("img").attr("draggable", false);
};




function _toggleStar (show) {
    if (show) {
        $(".marked").show();
    } else {
        $(".marked").hide();
    }
}




function _getTypedText () {
    if (typeans) {
        py.link("typeans:"+typeans.value);
    }
};
function _typeAnsPress() {
    if (window.event.keyCode === 13) {
        py.link("ansHack");
    }
}
</script>
</body>
</html>

Eigenartigerweise wird die jeweilige Karte in der Vorschaufunktion von Anki richtig dargestellt.
Wenn sie aber tatsächlich erstellt ist, besteht das Problem mit dem linksbündigen Bild.

Ja, Mann. Wahnsinn. Es funktioniert.

Vielen, vielen Dank! Bin froh, daß das jetzt endlich hinhaut - ich verwende das Programm täglich.

Anki ist übrigens ein exzellentes Lernprogramm. Kann ich wirklich nur weiterempfehlen!

Ich wünsche dir ein schönes Wochenende!