2017-12-04 4 views
0

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

screenshot of image cropping

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, &quot;945:600&quot;): &quot;&quot;' var='highRes'> 
      <b:include data='{image: data:post.featuredImage, imageSizes: [256, 512, 945, 1684],imageRatio: &quot;945:600&quot;,sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,enhancedSourceset: data:highRes}' name='responsiveImage'/> 
     </b:with> 
    </div> 
    </b:includable> 
+0

ich diese Seite überprüft, ist das Problem in dem Bild, nicht in CSS. Das Bild wird von oben und unten abgeschnitten. –

Antwort

0

Die Seite bei http://www.paddlebeforethewave.com verwendet:

<img alt="Image" sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" src="https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png" srcset="https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w256-h162-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 256w, https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w512-h325-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 512w, https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w945-h600-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 945w, https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/w1684-h1069-p-k-no-nu/paddleb4thewave-icon-cmyk-300px.png 1684w"> 

und wenn Sie die srcset URLs untersuchen werden Sie die Bilder beschnitten werden bemerken. Zum Beispiel this image.

Das Standardbild (https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png) wird jedoch nicht beschnitten.

So wäre eine Option, die srcset zu entfernen und gehen mit:

<img alt="Image" src="https://1.bp.blogspot.com/-ntbx6vLDHxM/Wh4bAtKUUbI/AAAAAAAAMYg/s4i_ebRrafUPeG7fQGeTloTDBfVGVg5EQCLcBGAs/s200/paddleb4thewave-icon-cmyk-300px.png" /> 
+0

Dank @brett die Bildquelle ist nicht im Seitencode definiert. Ich nehme an, dass es manipuliert wird in dem Code, den ich oben hinzugefügt habe. Irgendwelche weiteren Gedanken? Sehr geschätzt! –

Verwandte Themen