배경 크기 시뮬레이션 : 커버
또는 background-size:cover같은 HTML 요소 의 기능을 어떻게 시뮬레이트 할 수 있습니까?<video><img>
나는 그것이 작동하도록하고 싶습니다
background-size: cover;
background-position: center center;
jsFiddle
배경 표지를 사용하면 이미지에 적합하며 너비도 100 %입니다. 이것들은에 최적이 아니며 <video>이러한 답변은 지나치게 복잡합니다. 전체 너비 비디오 배경을 달성하기 위해 jQuery 또는 JavaScript가 필요하지 않습니다.
내 코드는 표지와 같은 비디오로 배경을 완전히 덮지 않지만 대신 종횡비를 유지하고 여전히 전체 배경을 덮는 데 필요한만큼 비디오를 크게 만듭니다. 초과 비디오는 페이지 가장자리에서 번져서 비디오의 앵커 위치에 따라 변합니다.
대답은 매우 간단합니다.
이 HTML5 비디오 코드 또는 다음 라인을 따라 무언가를 사용하십시오. (전체 페이지에서 테스트)
html, body {
width: 100%;
height:100%;
overflow:hidden;
}
#vid{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}<video id="vid" video autobuffer autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>최소 높이 및 최소 너비를 사용하면 비디오가 비디오의 가로 세로 비율을 유지할 수 있습니다. 일반적으로 일반 브라우저의 가로 세로 비율은 보통 해상도입니다. 초과 비디오가 페이지 측면에서 번집니다.
이것은 잠시 동안 머리카락을 뽑아 냈지만 스크립트를 사용하지 않는 훌륭한 솔루션을 발견했으며 5 줄의 CSS로 비디오를 완벽하게 커버 시뮬레이션 할 수 있습니다 (선택자와 대괄호를 세면 9 ). 이것은 CSS3 호환성 부족으로 완벽하게 작동하지 않는 엣지 케이스가 0 개 있습니다 .
여기서 예를 볼 수 있습니다
Timothy 솔루션 의 문제점 은 스케일링을 올바르게 처리하지 못한다는 것입니다. 주변 요소가 비디오 파일보다 작 으면 축소되지 않습니다. 비디오 태그에 16x9px와 같은 작은 초기 크기를 부여하더라도 auto최소한 기본 파일 크기로 강제 설정합니다. 이 페이지의 현재 최고 투표 솔루션으로 인해 비디오 파일의 크기를 축소하여 급격한 확대 / 축소 효과를 얻을 수 없었습니다.
그러나 비디오의 화면비가 16 : 9와 같은 것으로 알려진 경우 다음을 수행 할 수 있습니다.
.parent-element-to-video {
overflow: hidden;
}
video {
height: 100%;
width: 177.77777778vh; /* 100 * 16 / 9 */
min-width: 100%;
min-height: 56.25vw; /* 100 * 9 / 16 */
}
동영상의 상위 요소가 전체 페이지 (예 :)를 덮도록 설정되어 있으면 동영상 position: fixed; width: 100%; height: 100vh;도 마찬가지입니다.
비디오를 중앙에 배치하려면 확실한 센터링 방법을 사용할 수 있습니다.
/* merge with above css */
.parent-element-to-video {
position: relative; /* or absolute or fixed */
}
video {
position: absolute;
left: 50%; /* % of surrounding element */
top: 50%;
transform: translate(-50%, -50%); /* % of current element */
}
물론, vw, vh, 그리고 transform당신이 필요로하는 경우 CSS3는, 그래서 훨씬 이전 버전의 브라우저와의 호환성을 , 당신이 사용하는 스크립트가 필요합니다.
일부 브라우저의 경우 사용할 수 있습니다
object-fit: cover;
내가 이것을 한 방법은 다음과 같습니다. 실제 예제는 이 jsFiddle 입니다.
var min_w = 300; // minimum video width allowed
var vid_w_orig; // original video dimensions
var vid_h_orig;
jQuery(function() { // runs after DOM has loaded
vid_w_orig = parseInt(jQuery('video').attr('width'));
vid_h_orig = parseInt(jQuery('video').attr('height'));
$('#debug').append("<p>DOM loaded</p>");
jQuery(window).resize(function () { resizeToCover(); });
jQuery(window).trigger('resize');
});
function resizeToCover() {
// set the video viewport to the window size
jQuery('#video-viewport').width(jQuery(window).width());
jQuery('#video-viewport').height(jQuery(window).height());
// use largest scale factor of horizontal/vertical
var scale_h = jQuery(window).width() / vid_w_orig;
var scale_v = jQuery(window).height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;
// don't allow scaled width < minimum video width
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};
// now scale the video
jQuery('video').width(scale * vid_w_orig);
jQuery('video').height(scale * vid_h_orig);
// and center it by scrolling the video viewport
jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);
// debug output
jQuery('#debug').html("<p>win_w: " + jQuery(window).width() + "</p>");
jQuery('#debug').append("<p>win_h: " + jQuery(window).height() + "</p>");
jQuery('#debug').append("<p>viewport_w: " + jQuery('#video-viewport').width() + "</p>");
jQuery('#debug').append("<p>viewport_h: " + jQuery('#video-viewport').height() + "</p>");
jQuery('#debug').append("<p>video_w: " + jQuery('video').width() + "</p>");
jQuery('#debug').append("<p>video_h: " + jQuery('video').height() + "</p>");
jQuery('#debug').append("<p>vid_w_orig: " + vid_w_orig + "</p>");
jQuery('#debug').append("<p>vid_h_orig: " + vid_h_orig + "</p>");
jQuery('#debug').append("<p>scale: " + scale + "</p>");
};#video-viewport {
position: absolute;
top: 0;
overflow: hidden;
z-index: -1; /* for accessing the video by click */
}
#debug {
position: absolute;
top: 0;
z-index: 100;
color: #fff;
font-size: 12pt;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-viewport">
<video autoplay controls preload width="640" height="360">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" />
</video>
</div>
<div id="debug"></div>다른 답변은 좋았지 만 자바 스크립트가 있거나 비디오를 가로 및 세로로 가운데에 맞추지 않습니다.
이 전체 CSS 솔루션을 사용하여 background-size : cover 속성을 시뮬레이트하는 비디오를 만들 수 있습니다.
video {
position: fixed; // Make it full screen (fixed)
right: 0;
bottom: 0;
z-index: -1; // Put on background
min-width: 100%; // Expand video
min-height: 100%;
width: auto; // Keep aspect ratio
height: auto;
top: 50%; // Vertical center offset
left: 50%; // Horizontal center offset
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); // Cover effect: compensate the offset
background: url(bkg.jpg) no-repeat; // Background placeholder, not always needed
background-size: cover;
}
M-Pixel의 솔루션 은 Timothy의 답변 의 배율 문제를 해결한다는 점에서 훌륭 합니다 (비디오는 확대되지만 축소되지는 않으므로 비디오가 실제로 큰 경우 작은 확대 만 볼 수 있습니다). 그러나이 솔루션은 비디오 컨테이너의 크기와 관련된 잘못된 가정, 즉 뷰포트의 너비와 높이의 100 % 여야한다는 잘못된 가정을 기반으로합니다. 나는 그것이 효과가없는 몇 가지 사례를 발견했기 때문에 문제를 직접 해결하기로 결정했으며 궁극적 인 해결책 을 찾았습니다 .
HTML
<div class="parent-container">
<div class="video-container">
<video width="1920" height="1080" preload="auto" autoplay loop>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
CSS
.parent-container {
/* any width or height */
position: relative;
overflow: hidden;
}
.video-container {
width: 100%;
min-height: 100%;
position: absolute;
left: 0px;
/* center vertically */
top: 50%;
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.video-container::before {
content: "";
display: block;
height: 0px;
padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
width: auto;
height: 100%;
position: absolute;
top: 0px;
/* center horizontally */
left: 50%;
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
또한 비디오 비율을 기반으로하므로 비디오의 비율이 16 / 9 이외의 비율이면 패딩 하단 %를 변경해야합니다. 그 외에는 즉시 사용할 수 있습니다. IE9 +, Safari 9.0.1, Chrome 46 및 Firefox 41에서 테스트되었습니다.
편집 (2016 년 3 월 17 일)
이 답변을 게시 한 후 요소 background-size: cover와 요소를 모두 시뮬레이션하는 작은 CSS 모듈을 작성했습니다 . http://codepen.io/benface/pen/NNdBMjbackground-size: contain<video>
비디오와 다른 정렬을 지원합니다 (와 유사 background-position). 또한 contain구현이 완벽하지는 않습니다. 와 달리 background-size: contain컨테이너의 너비와 높이가 더 크면 실제 크기를 초과하여 비디오의 크기를 조절하지 않지만 경우에 따라 여전히 유용 할 수 있다고 생각합니다. 또한 특별 추가 한 fill-width과 fill-height당신이 함께 사용할 수있는 클래스 contain의 특별한 혼합을 얻을 contain하고 cover... 그것을 밖으로 시도하고 그것을 개선 주시기 바랍니다!
Daniel de Wit의 답변 과 의견을 바탕으로 조금 더 검색했습니다. 그 해결책에 감사합니다.
해결책은 object-fit: cover;훌륭한 지원을 제공하는 것입니다 (모두 최신 브라우저가 지원합니다). IE를 실제로 지원하려면 object-fit-images 또는 object-fit 과 같은 polyfill을 사용할 수 있습니다 .
데모 :
img {
float: left;
width: 100px;
height: 80px;
border: 1px solid black;
margin-right: 1em;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>부모님과 함께 :
div {
float: left;
width: 100px;
height: 80px;
border: 1px solid black;
margin-right: 1em;
}
img {
width: 100%;
height: 100%;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}<div>
<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div>object-fit: cover 이 IE, Safari polyfill을 사용하는 것이 가장 좋습니다.
https://github.com/constancecchen/object-fit-polyfill
img, video및 picture요소를 지원 합니다.
CSS와 작은 js는 비디오를 배경과 가로 중심으로 덮을 수 있습니다.
CSS :
video#bgvid {
position: absolute;
bottom: 0px;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
}
JS : (창 크기를 조정하고 별도로 한 번 호출)
$('#bgvid').css({
marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})
긴 의견 섹션 직후, 이것이 당신이 찾고있는 것이라고 생각합니다 .jQuery 기반입니다.
HTML :
<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
JS :
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$(window).height()){
img.style.height=$(window).height()+"px";
}
if(img.clientWidth<$(window).width()){
img.style.width=$(window).width()+"px";
}
}
</script>
CSS :
body{
overflow: hidden;
}
위의 코드는 div 내 에서이 작업을 수행하는 경우 브라우저 너비와 높이를 사용하며 다음과 같이 변경해야합니다.
Div의 경우 :
HTML :
<div style="width:100px; max-height: 100px;" id="div">
<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
</div>
JS :
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$('#div').height()){
img.style.height=$('#div').height()+"px";
}
if(img.clientWidth<$('#div').width()){
img.style.width=$('#div').width()+"px";
}
}
</script>
CSS :
div{
overflow: hidden;
}
또한 이것이 Chrome이라고 만 테스트했다고 진술해야합니다 ... 여기 jsfiddle이 있습니다 : http://jsfiddle.net/ADCKk/
브라우저 너비가 비디오 너비보다 작을 때 최고 답변은 비디오의 크기를 줄이지 않습니다. 이 CSS를 사용하십시오 (#bgvid가 비디오의 ID 임).
#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
이 문제가 있었지만 다른 솔루션이 내 상황에서 작동하지 않았기 때문에이 솔루션을 게시해야합니다 ...
background-size:cover;요소 background-image 속성 대신 요소 에서 CSS 속성 을 올바르게 시뮬레이션한다고 생각합니다. 크기와 상관없이 이미지 종횡비를 현재 창 종횡비와 비교해야합니다 (이미지의 경우에도 키가 더 크면) 창은 요소가 창을 채우고 있습니다 (필요한 경우 알 수는 없지만 가운데에 있음) ....
단순성을 위해 이미지를 사용하면 비디오 요소도 제대로 작동 할 것입니다.
먼저 요소 종횡비를 얻은 다음 (로드되면) 창 크기 조정 핸들러를 연결하고 초기 크기 조정을 위해 한 번 트리거하십시오.
var img = document.getElementById( "background-picture" ),
imgAspectRatio;
img.onload = function() {
// get images aspect ratio
imgAspectRatio = this.height / this.width;
// attach resize event and fire it once
window.onresize = resizeBackground;
window.onresize();
}
그런 다음 크기 조정 핸들러에서 창의 현재 종횡비를 이미지의 원래 종횡비와 비교하여 너비 또는 채우기 높이를 채울지 여부를 먼저 결정해야합니다.
function resizeBackground( evt ) {
// get window size and aspect ratio
var windowWidth = window.innerWidth,
windowHeight = window.innerHeight;
windowAspectRatio = windowHeight / windowWidth;
//compare window ratio to image ratio so you know which way the image should fill
if ( windowAspectRatio < imgAspectRatio ) {
// we are fill width
img.style.width = windowWidth + "px";
// and applying the correct aspect to the height now
img.style.height = (windowWidth * imgAspectRatio) + "px";
// this can be margin if your element is not positioned relatively, absolutely or fixed
// make sure image is always centered
img.style.left = "0px";
img.style.top = (windowHeight - (windowWidth * imgAspectRatio)) / 2 + "px";
} else { // same thing as above but filling height instead
img.style.height = windowHeight + "px";
img.style.width = (windowHeight / imgAspectRatio) + "px";
img.style.left = (windowWidth - (windowHeight / imgAspectRatio)) / 2 + "px";
img.style.top = "0px";
}
}
이 방법은 CSS와 HTML을 사용합니다. 실제로 비디오 아래에 div를 쉽게 쌓을 수 있습니다. 크기 조정 중에는 덮개가 중앙에 위치하지 않습니다.
HTML :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</script>
</head>
<body>
<div id = "contain">
<div id="vid">
<video autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
</div>
</body>
</html>
CCS :
/*
filename:style.css
*/
body {
margin:0;
}
#vid video{
position: absolute;
right: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
#contain {
width:100%;
height:100%;
zoom:1%;/*Without this the video will be stretched and skewed*/
}
이 질문에는 숨겨진 홉스의 평판이 +100으로 6 일 후에 끝납니다. 유연한 CSS 전용 솔루션을 얻기 위해 뷰포트 단위를 발명했습니다.
CSS 전용 솔루션에 대해이 질문에 현상금을 열었으므로 시도해 보겠습니다. 이와 같은 문제에 대한 나의 해결책은 고정 된 비율을 사용하여 비디오의 높이와 너비를 결정하는 것입니다. 나는 보통 Bootstrap을 사용하지만 필요한 CSS를 추출하여 작동하지 않습니다. 이것은 이전에 사용했던 코드로 올바른 비율의 포함 된 비디오를 중심에 둡니다. 그것은 효과가 <video>있고 <img>요소도 있습니다. 여기에서 가장 관련이있는 것이지만 이미 두 가지를 줬기 때문에 다른 두 가지도주었습니다. 행운을 빌어 요! :)
.embeddedContent.centeredContent {
margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
position:relative;
display: block;
padding: 0;
padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.embeddedContent {
max-width: 300px;
}
.box1text {
background-color: red;
}
/* snippet from Bootstrap */
.container {
margin-right: auto;
margin-left: auto;
}
.col-md-12 {
width: 100%;
}<div class="container">
<div class="row">
<div class="col-md-12">
Testing ratio AND left/right/center align:<br />
<div class="box1text">
<div class="embeddedContent centeredContent">
<div class="embeddedInnerWrapper">
<iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Testing ratio AND left/right/center align:<br />
<div class="box1text">
<div class="embeddedContent rightAlignedContent">
<div class="embeddedInnerWrapper">
<iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Testing ratio AND left/right/center align:<br />
<div class="box1text">
<div class="embeddedContent">
<div class="embeddedInnerWrapper">
<iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>에서 주석에 대답하기 위해 weotch 것을 디모데 라이언 목수 의 대답은 고려하지 않습니다 cover의 중심으로 배경을 '나는이 빠른 CSS 수정을 제공합니다 :
CSS :
margin-left: 50%;
transform: translateX(-50%);
이 두 줄을 추가하면 모든 요소가 중앙에 배치됩니다. 또한 HTML5 비디오를 처리 할 수있는 모든 브라우저는 CSS3 변환도 지원하므로 항상 작동합니다.
완전한 CSS는 다음과 같습니다.
#video-background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
margin-left: 50%;
transform: translateX(-50%);
}
나는 디모데의 대답에 대해 직접 언급했지만 그렇게 할만한 명성은 충분하지 않습니다.
얘들 아 나는 더 짧은 해결책을 가지고 있으며 나에게 완벽하게 작동합니다. 나는 비디오에 사용했습니다. 그리고 CSS의 표지 옵션을 완벽하게 모방합니다.
자바 스크립트
$(window).resize(function(){
//use the aspect ration of your video or image instead 16/9
if($(window).width()/$(window).height()>16/9){
$("video").css("width","100%");
$("video").css("height","auto");
}
else{
$("video").css("width","auto");
$("video").css("height","100%");
}
});
만약 당신이 if를 뒤집 으면, 당신은 격리 될 것입니다.
그리고 여기 CSS가 있습니다. (중심 위치를 원하지 않는 경우이를 사용할 필요가 없습니다. 상위 div는 " position : relative " 여야합니다 )
CSS
video {
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;}
방금 이것을 해결하고 공유하고 싶었습니다. 이것은 Bootstrap 4에서 작동합니다. 작동 img하지만 테스트하지 않았습니다 video. 여기 HAML과 SCSS가 있습니다
HAML
.container
.detail-img.d-flex.align-items-center
%img{src: 'http://placehold.it/1000x700'}
SCSS
.detail-img { // simulate background: center/cover
max-height: 400px;
overflow: hidden;
img {
width: 100%;
}
}
/* simulate background: center/cover */
.center-cover {
max-height: 400px;
overflow: hidden;
}
.center-cover img {
width: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="center-cover d-flex align-items-center">
<img src="http://placehold.it/1000x700">
</div>
</div>Old question, but in case anyone sees this, the best answer in my opinion is to convert the video into an animated GIF. This gives you much more control and you can just treat it like an image. It's also the only way for it to work on mobile, since you can't autoplay videos. I know the question is asking to do it in an <img> tag, but I don't really see the downside of using a <div> and doing background-size: cover
참고URL : https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img
'IT story' 카테고리의 다른 글
| TextView에 글 머리 기호를 어떻게 추가합니까? (0) | 2020.06.19 |
|---|---|
| 정규식을 사용하여 JavaScript의 문자열에서 구두점을 모두 제거하려면 어떻게합니까? (0) | 2020.06.19 |
| double이 정수인지 테스트하는 방법 (0) | 2020.06.19 |
| Swift 3.0 통화 결과가 사용되지 않음 (0) | 2020.06.19 |
| git 저장소에서 병합 한 후 .orig 파일을 삭제하는 방법은 무엇입니까? (0) | 2020.06.19 |