月別: 2020年12月

slick-sliderの画像が、印刷時、viewportに合わせて小さくなってしまう。
そりゃそうなのです、JavaScriptでelement-style直に○○pxって設定しているので…。

いんさつできるようにじでっでいわれだんでじがだなぐうう

@media print {
/*縮小時にトップページ画像が縮まる*/
.slick-track,
.slick-slide {
width: 100% !important;
height: auto !important;
}
.slick-initialized .slick-slide {
display: none !important;
}
.slick-initialized .slick-slide:first-child {
display: block !important;
left: 0 !important;
opacity: 1 !important;
}
}

そもそも、slickは画像を横に並べてoverflowさせて、その位置を入れ替えて表示させている。
なので、
中身の幅を100%にする。
外枠も100%にする。（初期値は中身の幅px*中身の数）
すると、横に並んでたものが縦に並んじゃうので、表示させたい画像以外をdhisplay: noneにする。
タイミング次第で透明度が0だったりするので、透明度を1にする。
左からの位置がすっとんでたり、これも0に固定する。
※slickの設定次第で、もう少し印刷CSS側も設定が必要かも

めでたし。