В последнем посте Встроить блог Medium на сайт. Это бесплатное и простое руководство по… | по 洪健翔 Хун, Цзянь-сян | июль 2022 г. | Medium, я показал вам, как встроить публикацию в Medium на ваш веб-сайт с нулевой стоимостью и абсолютно индивидуальной настройкой. Но это не кажется достаточно идеальным, не так ли? Итак, мы здесь, с небольшой настройкой настройки, давайте модернизируем вашу встроенную медиа-публикацию с помощью простой техники адаптивного веб-дизайна.

Как это работает

ДЕМО

CSS

.medium-card span {
padding: 8px 8px 8px 8px;
}
/* https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image */
.medium-card img {
width: 200px;
height: 200px;
object-fit: cover; /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
object-position: center; /* Center the image within the element */
min-height: 100%;
min-width: 100%;
}
.medium-card img {
transition: all 0.5s;
}
.medium-card:hover img {
transform: scale(1.2);
}

JS

/* Sometimes it's also useful to use window.innerWidth (not typically found on mobile devices) instead of screen width
when dealing with desktop browsers where the window size is often less than the device screen size. */
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

и

pageSize  =  (width  <  768) ? 1 : 3;

in promise.then()

В HTML

Мы помещаем <meta name="viewport" content="width=device-width, initial-scale=1"> это в тег <head>

GitHub: chienhsiang-hung/embed-medium-blog-on-website в RWD (github.com)

Свяжитесь со мной: Хунг, Цзянь-Сян (chienhsiang-hung.github.io)