0
トリミングせずに画像を表示しようとしています。CSSトリミングせずに画像サイズを維持する方法
これは私が成功せずに操作しようとしたコードセクションです。私はまたstackoverflowとW3の学校のバリエーションを検索しましたが、私は近づいていないので、私のアプローチに欠陥があると信じています。しかし、画像の上下をトリミングし続け -
.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;
}
目標は、完全な画像がトリミングなしで表示されることです。添付のスクリーンショットを参照してください、と私は学ぶことを試みているwww.paddlebeforethewave.com
サイトです。なぜ私のアプローチに欠陥があるのかについてのヒントを評価してください。
ありがとうございます。コメントに基づいてさらなる情報を更新
。
<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>
、問題はないCSSで、画像です。画像は上下からカットされます。 –