Ich versuche, Bildanzeige ohne Zuschneiden zu haben.CSS, wie Bildgröße beibehalten wird, ohne zu beschneiden
Dies sind die Codeabschnitte, die ich versucht habe, ohne Erfolg zu manipulieren. Ich suchte auch stackoverflow und W3 Schulen für Variationen, aber ich komme nicht näher, so glaube, dass mein Ansatz fehlerhaft ist.
.FeaturedPost .snippet-thumbnail {
float: $(startSide);
margin: 0;
margin-$endSide: 1em;
}
.FeaturedPost .snippet-thumbnail img {
width: 200px;
height: auto;
max-width: 100%;
float: left;
margin: 10px;
}
Das Ziel ist es, dass das Vollbild ohne Zuschneiden zeigen wird - aber es weiterhin die Ober- und Unterseite des Bildes zu beschneiden. Siehe beigefügte Screenshot und Website ist www.paddlebeforethewave.com
ich zu lernen versuche. Ich schätze alle Tipps, warum mein Ansatz fehlerhaft ist.
vielen Dank.
Aktualisierung mit weiteren Informationen basierend auf Kommentare.
<b:includable id='snippetedPostThumbnail'>
<div class='snippet-thumbnail'>
<b:with value='data:post.featuredImage.isYoutube ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, "945:600"): ""' var='highRes'>
<b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684],imageRatio: "945:600",sourceSizes: "(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)",enhancedSourceset: data:highRes}' name='responsiveImage'/>
</b:with>
</div>
</b:includable>
ich diese Seite überprüft, ist das Problem in dem Bild, nicht in CSS. Das Bild wird von oben und unten abgeschnitten. –