Другие ответы
Прежде чем я предоставлю свой собственный подход к источникам, я сначала обсудю ответ от Рон Ройстон
и покажите возможные проблемы / удары.
Вы уже указали на проблему с этим подходом:
это не работает, потому что, если рамка имеет закругленные углы, подобные этой, снимок экрана все еще может просматриваться в зависимости от размера фона
Возможное решение предоставлено kthornbloom :
Поэтому добавьте border-radius к элементу изображения, если ему нужны закругленные углы, верно?
Правильно! Но это работает только для некоторых изображений. Видите, вы не можете применить border-radius только к background-image. Вместо этого вы должны сделать это для самого контейнера.
Ну, в чем проблема? Просто добавьте достаточно маленькое border-radius, чтобы оно не обрезало изображение, уменьшите background-image, и вы готовы к работе, верно?
Не совсем! Вы должны решить, что делать с размером фонового изображения. Вы можете уменьшить его, но тогда вы не можете использовать cover или что-то похожее на background-size. Если у вас нет изображения, которое идеально вписывается в границы изображения смартфона, вы столкнетесь с проблемами. Кроме того, border-radius устареет, если вы уменьшите фоновое изображение, поскольку оно больше не касается границ.
.colorClassProxy {
display: none
}
.itemBox,
.itemBox>* {
position: absolute;
box-sizing: border-box;
}
.itemBox {
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
border-radius: 15px;
background-size: 95% 95%;
background-repeat: no-repeat;
background-position: center;
}
.backgroundColorBox,
.backgroundGraphicBox,
.foregroundBox,
.frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<div class="backgroundColorBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div>
<div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);"
data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div>
</div>
Не выглядит хорошо, не так ли?
Однако , этот подход в некоторых случаях работает . Если контур смартфона не имеет кнопок сбоку (как эта) , этот подход будет работать . Но я не могу представить себе смартфон, у которого нет кнопок сбоку.
Из-за отсутствующей разметки этот ответ очень трудно прочитать . Тем не менее, это в основном правильно и лучший способ пойти в большинстве случаев. На самом деле, вы почти сделали это сами с помощью обтравочного контура. Но сначала давайте сделаем шаги.
- Создайте изображение и поместите его внутрь контейнера.
- Уменьшите его до нужного размера.
- Расположите его правильно.
- Удалите обтравочные контуры, поскольку это не нужно.
/*====Added this part====*/
.display-image {
width: 165px;
height: 340px;
display: block;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
background-size: cover;
margin-top: 15px;
margin-left: 5px;
border-radius: 10px;
}
/*=======================*/
.colorClassProxy {
display: none
}
.itemBox,
.itemBox>* {
position: absolute;
box-sizing: border-box;
}
.backgroundColorBox,
.backgroundGraphicBox,
.foregroundBox,
.frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<!--====Added this line====-->
<div class="display-image" alt=""></div>
<!--=======================-->
<!--====Removed the clipping path====-->
<div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);"
data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div>
</div>
Краткое примечание: Ссылка, которую он предоставил, на самом деле не отражает того, что он написал.
Я взглянул на причину, по которой вы открыли награду:
Ищет ответ из достоверных и / или официальных источников.
Вы можете увидеть его на каждом веб-сайте, который использует изображение в качестве смартфона.
- Это уже обсуждалось при переполнении стека один раз здесь .
- Я создал тестовое приложение с конвертером "сайт в приложение". На этом сайте вы можете протестировать приложение, и они использовали тот же подход. Разница лишь в том, что они не могут иметь изображение в качестве дисплея. Вместо этого они используют холст. К сожалению, я не могу реализовать это в своем ответе, поэтому вместо этого я должен опубликовать ссылку .
- То же самое можно увидеть на этом сайте.
Все примеры, которые я привел, представляют собой довольно крупные компании, и если вы будете искать больше примеров, вы найдете больше их. По моему мнению, эти примеры делают этот подход заслуживающим доверия.
Редактировать
На основании комментариев я дополню ответ.
Это зависит от того, сколько вы можете редактировать свою фотографию. Я предполагаю, что вы владеете фотографиями или имеете право использовать их. Вот один из подходов:
ПервыйЯ думал, что могу просто расположить его и масштабировать изображение. Оказывается, смартфон на картинке слегка повернут. Таким образом, один подход будет использовать CSS для этого. Вам придется работать с skew() (CSS), но это очень, очень, очень трудно прибить. Кроме того, если вы просто поместите его на изображение, вы столкнетесь с той же проблемой, что и раньше, с вашими путями отсечения. Так что, похоже, это не решение проблемы.
Другой подход заключается в следующем:
Для вас не должно быть никаких проблем просто преобразовать его в PNG (Portable Network Graphic) и вырезать белый дисплей, чтобы сделать его прозрачным.
- Задайте нужное изображение на дисплее ниже
z-index.
- Разместите и масштабируйте.
Однако, это только приблизительно . Конечно, вы можете просто skew и transform изображение, пока никто не заметит. Но, похоже, это не самый «чистый» способ?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.display-image {
width: 184px;
height: 322px;
display: block;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
background-size: cover;
top: 165px;
left: 219px;
position: absolute;
transform: rotate(0.2deg);
z-index: -1;
}
.itemBox {
position: relative;
box-sizing: border-box;
}
.frameBox {
z-index: 1;
}
<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<!--====Added this line====-->
<div class="display-image" alt=""></div>
<!--=======================-->
<!--====Removed the clipping path====-->
<div class="frameBox"><img alt="" src="https://i.imgur.com/jbHkPuf.png"></div>
</div>
Единственный чистый способ, который я могу придумать, - это использовать canvas. Как вы можете видеть здесь , можно искажать изображения по своему вкусу. Вам нужно нарисовать всю картинку «смартфон изнутри» в canvas, а затем нарисовать изображение, которое должно отображаться на дисплее в нужных координатах. Но вы должны решить, стоит ли это времени, потому что это довольно трудоемкий, сложный и много кода. Я решил, что это не так, и поэтому не существует рабочего примера. Кроме того, вы не можете просто использовать такие вещи, как background-size: cover, поэтому вам придется обрезать изображение до размера смартфона, если вы не хотите писать огромный мусор JS. На мой взгляд, подход до этого является лучшим подходом.
Конечно, я мог что-то пропустить, поэтому не стесняйтесь поправлять меня или редактировать мой ответ.