I have a video And I want to change the height and keep the same width For example width on full screen I Think is 100% and Height Just 200px same to this website www.paypal.com
The Problem is when I change the height width also change automatically, And video go to the center(stretched horizontally)
<video autoplay class="embed-responsive-item">
<source src=test.mp4 type=video/mp4>
</video>
video{ width: 100%; height: 200px; }
Thanks Advance For any help
That PayPal website uses the CSS property object-fit: cover to fit the video the same width.
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
.hero-home video {
display: block;
height: 100%;
width: 100%;
top: 0px;
position: absolute;
left: 0px;
z-index: -1;
object-fit: cover; /* this makes it fit within the video container */
opacity: 0.9;
transition: opacity 0.3s ease 0s;
}
Possible values for object-fit
/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;
They also are using a mix of max-width, min-width, and min-height on the some of the parent elements of the <video> element.
Just inspect the CSS to see what their doing. You will see that part of the video is being hidden, not displaying all the height of the video on the .video-container using overflow:hidden.
Hi you can give width and height to the container your video is in and then give the video element min-width/height like this the video will stay in the center and only the width will change and not the height.
.container {
width: 100%;
height: 100%;
}
video {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 200px;
width: auto;
height: auto;
}
Related
I'm trying to create an animated picture which contains a lot of layers.
In order to have images with right proportions on different screens I use cover css property value(I've tried it for both object-fit for images and background-size for background images). That's why my images on wide screen are croped by the browser.
The problem is that my layers are transformed(mostly rotated and moved) during the animation so there are moments when it is seen the cropped image.
Please see my example below.
How it can be prevented? Or it there some other technique?
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 1000px;
height: 450px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
width: calc(100% + 20px);
}
.layer img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gulls {
animation: gulls ease-in-out 13s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fsky.png?alt=media&token=25033588-d58c-4616-94e9-4974ec4157a4" alt="">
</div>
<div class="layer gulls">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fgulls5.png?alt=media" />
</div>
</div>
Currently I have this: https://jsfiddle.net/koljada/c08qdw1m/
first of all i have to say that your birds image is a lot bigger then the birds therself (many padding around) as i see the whole image is 2048/1934...
anyway, when you use
object fit:cover he crop;
the image for save the proportion. you can using
object-fit:scale-down;
for save the proportion by scale down the image until he come inside the parent space. i add a quick exemple about how it works down here:
hope it is what you search for..
Images can be cropped with a container div with overflow: hidden; position: relative, So you can position the image inside with position: absolute. The top and left css attribute of the image has to be set a negative value.
The image exact values can be found by using sine and cosine functions.
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 200px;
height: 100px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 20px);
}
.layer img {
height: 150%;
width: 150%;
}
.gulls {
animation: gulls ease-in-out 3s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer gulls">
<img src="http://via.placeholder.com/350x150/000000" />
</div>
</div>
You can use overflow: hidden; position: relative to crop your images after using container div, and using position: absolute at the images to place the image.
How do I zoom in a high quality image, for instance 2000px x 2000px, to the center of a container ? I've tried using transform: scale () but it still makes it scrollable vertically or horizontally. I'm specifically looking for a mobile version. How do I make the image zoomed in centered exactly according to the width of mobile? Using width: 100% doesn't help either. And if I define it like in the code below using pixels it is cropped out on mobile. Do I make it exactly width and height or mobile or? I need it to fully cover whole body and be zoomed in exactly in the center of image. Thanks for you answers. Also zoomed quality is really bad even though it is high quality image.
Basically center and zoom this image so that on mobile it will cover whole screen, spin and look like this:
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
}
#wrap {
transform: scale(2.0);
}
#bg {
width: 1400px;
height: 1400px;
background: url(bg.png);
background-size: contain;
background-position: center center;
-webkit-animation: rotation 9s infinite linear;
}
I have been playing around with this a bit. This is what I ended up with.
Here is the logic that I used figuring this out:
An image rotates around its center.
If I put the image in a container it will cut a part of the image off. The image will still rotate around the center of the image....But that is not the center of the container anymore.
Solution: I made the image behave like background: cover; by using min-width: 100%; and min-height: 100%;
Solution: I centered the image in the container using flexbox.
Another way of centering might be preferable, since the flexbox also affects other children of the container. So any improvements/comments about that would be welcome :).
html
<div id="wrapper">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV0AAAGGCAYAAADYcVJbAAAACXBIWXMAABJ0AAASdAHeZh94AAAZQklEQVR4Xu3dZ3SU15nAcQkMkgBhejej0agCpohiarCxMdhU03sRvRpM7zbgQjPGdASIYoqNyW52sznJ+iR2TpzEsXc3m+QkJ46dGMeWRFVBGr4+O+8AXhtfQEgz79x75//h952Dnvd/3vPOLTExU38oANSeemGrFOV2kBvHHwVCgugCd9Fs9jH5yRuDlQ8OUFFEF1Cokn1epq9ZLYW85SLEiC6g0GJOrvx+fx/lQwNUBtEF7hA79bxs3DRX/IoHBqgsogvcofcLO5QPCxAKRBf4lhbOj2e7+PEM4UN0gVuczwpz1q7gxzOEFdEFbmky64T8xxtDlA8KECpEF7hl7UsLlA8JEEpEFwjwzj0iXx/uonxIgFAiukDA2ztGKh8QINSILqJabMCw5Zvk8tGOygcECDWii6jWYOZJObNjtPiPt1U+IECoEV1EtaeXbOFbLlxFdBG1qma/K7lbxykfDCBciC6iVub8A1LGZwW4jOgiKlXPPifv735W+VAA4UR0EZUGL3uZU8QQEUQXUafujFPyE7b7IkKILqKKc6jN0OWb5cvDXZUPBBBuRBdRpfaM03J82zjW5SJiiC6iSqeFu+Xa0SzlwwC4gegiqvzw9eHKBwFwC9FF1Oi9eAfrchFxRBdRodq0c/LxvqeUDwHgJqIL6zkrFoav2CQFRzorHwLATUQX1qs1/awc2jKRzRDQAtGF9Tos3CufHuqpfAAAtxFdWG/Fi4uUww9EAtGF1RrPOiGf53RXDj8QCUQXVpu/brly8IFIIbqwWmFuB+XgA5FCdGGt+euWSdkxNkNAL0QXVnKOb/wxxzdCQ0QXVhq8/GU2Q0BLRBfWqZZ9Tta8tIBPC9AS0YV1Gsw8KZ9wzgI0RXRhnSHLX5aSY+2UAw9EGtGFVZzDbX7x5gDlsAM6ILqwSufn3xQ/33KhMaILa8QG7H1tinLQAV0QXVijzfz98ucDP1AOOqALogtrjFu1QS4e6aQcdEAXRBdWqDn9rOx7bbJyyAGdEF1Y4dEF++Srw48phxzQCdGFFWasWSV+bvqFAYgurPDDncOVAw7ohujCeN45Rzg3F8YgujDesg2LlcMN6IjowmgNZ52Uzw71UA43oCOiC6P1W7JFrh7NUg43oCOiC2NVyT4f3PbLqgWYhOjCWM1mH5Of7hqsHGxAV0QXxuq26A359GBP5WADuiK6MJJzbm72mjVSymHlMAzRhZGce9AObJmkHGpAZ0QXRmo++5gU57ZXDjWgM6ILI01ZvVb8ioEGdEd0YaQ/HXhcOdCA7ogujNN41gm5fJTDymEmogvjTFm9RjnMgAmILoxSNfu8HNwyUTnMgAmILozScOZJ+fWefsphBkxAdGGU/ktfkws53ZTDDJiA6MIYzi60OWtXSBEHlsNgRBfGqJ59TjZvmqMcZMAURBfGcJaKvffmQOUgA6YgujBGytwc+Zpr1mE4ogtjDFu+STnEgEmILoyx45UZyiEGTEJ0YYy8w12UQwyYhOjCCB0X7pYy7kKDBYgujDB8+UblAAOmIbrQnnPewods/YUliC6012T2cfnLwV7KAQZMQ3ShPd/cHPmC8xZgCaIL7S3ZsJj70GANogutPZT9bvC8hetctQ5LEF1oreb0s3Jk6wTl8AImIrrQWrsF+7iEElYhutBa10W75PNDPZTDC5iI6EJrQ5a/zPdcWIXoQmvDV7ATDXYhutDasW3jlIMLmIroQmu/eHOAcnABUxFdaI1NEbAN0YW2ak0/qxxawGREF9qatXalcmgBkxFdaGvZhsXKoQVMRnShraLcDsqhBUxGdKGl6tPO8SMarER0oaU28/dL2THuRIN9iC601HPR6+JXDCxgOqILLY1ftUE5sIDpiC60lLt1vHJgAdMRXWiJ6MJWRBfaaT77mHyw+xnlwAKmI7rQDtGFzYgutJM275D8bm9f5cACpiO60M5zyzdLwZHOyoEFTEd0oZ0RKzbK5aOdlAMLmI7oQiuxAWNWvihXjnZUDixgOqILrTyU/a6sfPF5tgDDWkQXWqmWfU7Wb5yvHFbABkQXWiG6sB3RhVYSp5+RU9tHK4cVsAHRhVYazDwpH+97SjmsgA2ILrTiRPeTfU8qhxWwAdGFVogubEd0oZWms47LH/Y/rhxWwAZEF1ppv3CvclABWxBdaIXownZEF1ohurAd0YVWiC5sR3ShFaIL2xFdaGXeuuXKQQVsQXShld2vTlUOKmALogutEF3YjuhCK0QXtiO60ArRhe2ILrRCdGE7ogutEF3YjuhCK0QXtiO60ArRhe2ILrRCdGE7ogutEF3YjuhCK0QXtiO60ArRhe2ILrRCdGE7ogutEF3YjuhCK0QXtiO60ArRhe2ILrRCdGE7ogutEF3YjuhCK0QXtiO60ArRhe2ILrRCdGE7ogutEF3YjuhCK0QXtiO60ArRhe2ILrRCdGE7ogutLNnwgnJQAVsQXWil/cK9ykEFbEF0oRWiC9sRXWiF6MJ2RBdaIbqwHdGFVogubEd0oZVGs07I7/f3UQ4rYAOiC600mHlSPtn3pHJYARsQXWiF6MJ2RBdaIbqwHdGFVhKnn5GzO0YphxWwAdGFVqpln5P1G+crhxWwAdGFVogubEd0oRUnuuteIrqwF9GFdkateEkuH+2oHFjAdEQX2hmxYmMgup2UAwuYjuhCO0QXNiO60E7KvBz57d6+yoEFTEd0oZ3ms4/JB7ufUQ4sYDqiC+00C0T3faILSxFdaCl363jlwAKmI7rQEtGFrYgutDR19VrlwAKmI7rQUq/Fr4tfMbCA6YgutNRh4R4pO95WObSAyYgutBQ37R0pzm2vHFrAZEQX2ioiurAQ0YW2FqxfqhxawGREF9qatma1cmgBkxFdaKvprOPKoQVMRnShNZaNwTZEF1r71Z7+ysEFTEV0obXDWycqBxcwFdGF1sat2qAcXMBURBdaG7p8s5QeY2ca7EF0obUei3bKFzndlMMLmIjoQmtt5u+X3+/voxxewEREF1qrOf0sZ+vCKkQXWquWfU5e3TxLSo+1Uw4wYBqiC+0t3rCEE8dgDaIL7aXPOygX+DENliC60F6L2bny6aGeygEGTEN0ob0q2eflwz39lAMMmIbowgiTuKgSliC6MELXRbukTDHAgGmILozxz8OPKYcYMAnRhTEOvDZZOcSASYgujDFm5YvKIQZMQnRhjNR5OXLxaCflIAOmILowRpNZJ+Tnbw5QDjJgCqILY1Sfdk42b56tHGTAFEQXxqgy9bwsWr9ErnP4DQxGdGGUvku2yj84hwEGI7owinMOw0d7+yqHGTAB0YVRYqeel72s14XBiC6Ms3D9UuUwAyYgujBO09nH5crRLOVAA7ojujCO84nh80M9lAMN6I7owkjjV64Xv2KgAd0RXRgpac4R7k2DkYgujOTsTju9fbRyqAGdEV0YKXbEHpnS3ydluerBBnRFdGGekQck5pFO0iO9pnz2RoZysAFdEV2YZeRBifF0DQxujDxSv5q8tzpZOdiAroguzDH5nMS0GxkY2thgdKtWiZED05uL/5h6uAEdEV2YYfI7EtN9jsRUSwgG97bBHR+WazmtlcMN6IjoQn+TzkpM1jiJeSjuO8F1NEh8SD7byXddmIPoQn/dZ3/vDfe2KrExsnFkE+VwAzoiutBa68E7ZUOjLNlWtb50qhInrWKrS9PYqtIooHpMrDwUCG9q0zgpOsInBpiB6EJbWYN2yo+b9pKvq3u+8dfqj8gvqzWT/wxYW7WuzKtSW0ZUqSUfLfXJDX5QgwGILrTU65lX5df1sr4TXJUL1VvK3wL+4vHI1SFpUrw4U0q3Bt56D6sHHog0ogvttB/8hvyqfidlZMslziN5DyfJpfY+KRybLkXrM6X4YBu54exe420YEUZ0oZV6407I1szRciHOqw5qBeXVSZKvs5Ll2ujA2/CSwNvwq63Ff+BWiBUPBhAuRBfaSJxwWvakPSdfxCcrwxkSzltwIMAFyclyuXuKXBuWJiXLM8W/NxBgxQMChBrRhRYSJ5yS056n5Z9xgTdSVSzDJeHmp4j8Zl650idFrm9oJTeOqh8WIBSILiKuwdgTsit9uPvBVYn3SIEnWa6NSgsGuGxXa7lxRP3wABVBdBFRtcefkh2Zo+RCOD8pVFBe7SS52CZZrg5MleK5GTe/A+fwGQKVQ3QRMU5wj3ufCfmPZiF3+zvwI1651NEnhRPSpXRb4A2YzxCoAKKLiKgz7i3J8Q2Sr1SRM0FNj1zMSJbi+RlStifw9kuAUU5EF66rM/4t2Z45Sr7U/Q23PAJvwQXNvXJ1UKqULM28+Q2YtcC4B6ILVznB3Z861I7g3iG/XpJcapss14anSenLrcTP2y8UiC5c02R0rpzy9JOvqmuwSiGc4j2Sl+iRi4/6ghsx/GxJxrcQXbii46DX5WeNu6sjZbOEQHxTk6VwcrqUbg68/TrbkRUPIqIH0UXYdRmwXd5r1E0dpWgR57m5AeOJlOCPb/79xDdaEV2ElRPcD+t3VIcoGt1efubzStGU9JsrHxQPJuxFdBEWVae8K08+vYk33PvIb+qVwomB+O5ozbffKEF0EXLVJ78j07s9L3+rkaoMDe7gfHpo4ZWrA1KlZEUm330tR3QRUtUmn5NFnWfL3xN86sDg7pz4NvbKpc4+KZ4fiO8h4msjoouQqTnxjKxvO0k+4w03JPKbJ0nR9PSb5/6y4cIaRBch0XT00eBJYap4oHLym3vlypBUKVyZIf59vP2ajuiiUqpMOS9P9Hs5uOlBFQyESFxA/SS53DNFip3txvzoZiyii0pxbuz9Tb0s+3eZ6eLWkrOLPXxyfSfXzpuI6KJCEiaeDe4yc4KrjAPCL9EjV59LldItHDNpEqKLB+bc9LC40ywrD60xjnPThdcr10akBbcZE1/9EV08kHrjTkpu8rPyaY00dQQQGQnONUNeuTIsTcq4ZFNrRBflEjvlvLQZ8qb8qHlv9UMPPThrfZt7pWRlJne7aYro4r5qTTgjQ/qsk0/qtFU/6NBOXk2PXOmdEowv24v1QnRxT/XHnpA17afKHxNbKR9uaMx5623ilStPpsj1Ta3kRq46AnAX0cVdNR6TKx806Kz/xZG4Nye+DZOkcHSalOWoQwD3EF18T/ykt2XAkxvko7od1A8xzBSIr3OZZslqznWIJKKL76g77qSsbzdZPq7TTv3gwnh59ZPk6sBUKX2NzRWRQHTxjVZD98jZln1ZfxsNanikoOXNa4T8Obz1uonoQqpPekeefHqz/Ikfy6JPnEcud/FJ6SuBt15+aHMF0Y1isVPPS8uRObK6/VQ2O0S5ghZeKZyQLmWc5xB2RDeK9ev7UvBzwoX4ZOWDiCiT4JFL7XxSsiyT7cRhRHSjkLM64UDqEL7dQimvdpIUjk0nvGFCdKOIc1lkl4Hb5WRSf+XDBnwjLvDW28En19e1Ej/biUOK6EYJ56Caad0XyS8bdJavVA8ZcCdnU8Wtb72EN3SIruViA7IGvS4/atZbPk9IUT9cwD3k1UqSS1k+KdvOj2yhQHQt5VyjUz/wdjur6wL5n4cfVT5MwIMoaO6V4nkZ7GarJKJrIedW3qFPrJVTnqeVDw9QUc5VQVefTeWttxKIrmVqjz8V3MbLqWAIm3iPXMxMlpIVmVwNXwFE1xJxk96WXs+8pn5IgDDIezhJirLTOSz9ARFdw9WYeFZ6939FjvgGyt8TfMqHAwiXvASPXO6VItc3cj9beRFdgzlbeLe1Gi3//XBbrkBH5MR5pMCXLEWzMghvORBdQw19Yo38b+3W8s84Ygs9OEvLrg5I5eCc+yC6BnFWJXQdsE2Oe59RDj2gg8s9Um6ubuBHNiWia4Dqk98JxnbToxPkj4mtlYMOaMM5OKe9T66vaaWMTrQjuppLGnFI9qUOkf+q05YDamAOZwtxM68Uz8zgjfcORFdDzm6yxAmnZVTvVfLbetxTBnM5V8FfG5XGLrZvIboaqTL1vHgCb7YTey6Vf2/WSznEgGmcoyKDu9h2sYvNQXQ10WR0rqzImiY/btqLg2lgnxo3D0i/vr5V1H9uILoR5mxueL7z7OC2XZZ/wXb5Tb1S8kJ0bx8muhHgHCbeYtRhGdV7pbzfsAsbGxBV8hsmSdHsjKjdPkx0XdZ4zLHgcYv/0vxx+TKe1QiITs65DcEf2PZH3w9sRNcldca/JS90nBlcjcA3W+DWDrb+qeLfF13hJbphFDfpHWk+6ohM6LU0eD6CavCAqBbvkSt9A+GNojdeohsmzg4y51zbPyS25pstcC+B8Dpbh0u3RseSMqIbQs7V5oP6rJe3kvrJ7+q25wJIoLyc24ezfFL6iv3hJbqVFDvlvNSaeCa4oeG9xt3UAwWgXC76vFK2w+7wEt0KajTmuHQZsF1ebT1WPq7bTjlAAB5cfkuvlKyy91B0ovuAmo0+KjO6PR/8hPBR3fZsaADCIL+FV4oX2nkoOtEth2qTz0nm0D1yJHlg8ODwf3AtDhB2ziaK4O41RbhMRnQVnB1jzrra5OEHZVq3RfJBgy680QIR4ByWE3zjtWj3GtH9ltoTTkvbIbtkQee5cjBlcHAFgmoQALgnv16SFE3PEH+OOmKmIboBzlIvJ7T/1uwH8pt6WXKB7bmAVoLnNTgXX1pwUE7URddZ4uVEtt7YEzKozzr5aeMerKcFDOBsGy5ZlGn8xZdREd2HJp+TBmOPS9agnTKu1/LgxY6f1GGZF2CavJqBN94p6eI/aO62Yauj69yeOzjwNuuspT3bsq98WL+jfBGfrPxjAjBDfv0kKZwYCO9hddR0Z110nU0LQwKh/XnDx+QPzvKueB8rDwDL5CUG3nhnZCijpjsjoxsb4KydrTfuhKQMPyDdnt0mSzvOkF3pw+QrAgtEhbwEjxQ6nxpyzPrUYFR06457S1KG7ZfJPZbI6vbZciR5gPwi8EZ7gU8GQFRyDkMvzDbrU4PW0XU2KTw6ZJc80e8VORoI7M8ad5eP6naQz2qkypdxLOsC4JH8Jl4pWWbOzrWIR7fKlPPByxkTJ5yWRmOOSerw/cFdYCeS+sunNdL4HgvgvgqaeaXsdTNOJ3M1ugm34pr+3F7pPHBHcGXBzK4LZVf68OCbrLOMi2+yACrioi/ZiPN4wxZd5+yCliNzJG3YPpnXZZ4s7ThTznielrcfeUp+3qhr8K6wv9ZMU/7nAUBFBA9C1/wGipBE97EB26V3/1el/1Mvyc8a95D3G3SRPya2Cu70YrcXANfEeeTKEyniP6TvioYYZ0us80Z6px7Pbgn+gHXb+F7LZF27Kd/4c60M+TTwpurgkwAAbSR45NrwNG1XNMS8kTFC/rX5499z+0es27hcEYAp8mp6pHCMnuGNUf2DAcB0eXWSpGhqunYH5BBdANbKb+SVkiV6reElugCsVtDSK9fXt1IGMBKILgDrFXi9UrpZj6VkRBdAVLjU1idlOyIfXqILIDrE31rDG+ED0IkugOhR0yPXhqVFdEUD0QUQXWp4pHhu5A5AJ7oAok5BC69cX9cqIrcLE10A0SfOI5faReaHNaILIDrFe+RytxTXv+8SXQBR7dpzaXLjqDqQ4UB0AUQ15561ojkZ4ncpvEQXQNTL93jl+gZ3tgoTXQAIuNTJ58pnBqILAI44jxSODf/3XaILALfk1fJI8cLMsK7fJboA8C0X05OldEv41u8SXQD4tgSPXB2UKv4cdTQri+gCwB3y6iVJyeLw3DhBdAFAwTmfoWxb6D8zEF0AuIuLbXziPxTa83eJLgDcRV6tJLk2Nl38R9QBrQiiCwD3ELzY8sXQ7VYjugBwL3EeufyYL2SnkRFdALifeI8UTc8IyaYJogsA5ZBXPykkh+IQXQAop8tdU8S/r3KrGYguAJRTXmKSFM1Ir9RnBqILAA+gwJcsZdsrvmmC6ALAg4jzyJXHUyp80wTRBYAHFQhv8fwMZVTvh+gCQAUUeCt2BCTRBYCKSPDIlf6p4j/4YKsZiC4AVFBenSQpWf5gR0ASXQCohPzUZLn+AG+7RBcAKiPOI9eGp5V7NQPRBYBKym+YJCXlPImM6AJAZQXedq8+lSI3ynHuLtEFgBDIb+KVklX3/1GN6AJAKDjn7va8/9su0QWAUKnhue8SMqILACFU4PGK/8Ddl5ARXQAIJWcJ2cT0u17vQ3QBIMQupiVL6V2OfyS6ABBiebU8UjhVfdg50QWAMLjU3if+Pd//tkt0ASAMnLfd4kXfX8lAdAEgTApSkr/3gxrRBYAwKp773RsmiC4AhNHFzGTx7/3/b7tEFwDCKO/hJCn61tsu0QWAcLp1JoN//823XaILAGEWPG/31glkRBcAwi3wtnulTwrRBQC35NVMkrLdbYguALjlUicf0QUA18R7iC4AuInoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuIjoAoCLiC4AuMYj/we1S/LYDKJ7aQAAAABJRU5ErkJggg==" id="image"/>
</div>
css
#keyframes zoom-effect {
0% {
transform: scale(1) rotate(0deg);}
100% {
transform: scale(4) rotate(360deg);}
}
#wrapper{
height: 250px;
width: 350px;
border: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#image{
z-index: -100;
min-height: 100%;
min-width: 100%;
animation-name: zoom-effect;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Hope it helps :)
Set width: 100% and remove background-size: contain:
JSFiddle
#bg {
width: 100%;
height: 500px;
background: url(http://placehold.it/1000x1000);
background-position: center;
background-repeat: no-repeat;
}
<div id="bg"></div>
and if you want to use these styles for the body, add background-attachment: fixed:
JSFiddle
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
background: url(http://placehold.it/1000x1000);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
You could use background-size: 200% combined with background-position: -50%, -50% or a similar proportion (300% size vs. -100% position offset)
Example:
.x {
width: 400px;
height: 300px;
margin: 100px;
background: url(http://placehold.it/400x400/fa0);
background-size: 300%;
background-position: -100%, -100%;
}
<div class="x">
</div>
About rotation: You can rotate the whole thing, but not the background image alone, so you have to use two DIVs: Put one rotating div into another (smaller) div that has overflow: hidden.The rotating DIV has to have position: absolute and z-index: -1 to remain in the background.
Here's that situation in action:
.y {
width: 400px;
height: 300px;
margin: 100px;
overflow: hidden;
position: relative;
}
.x {
position: absolute;
width: 800px;
height: 600px;
left: -200px;
top: -100px;
z-index: -1;
background: url(http://placehold.it/400x400/fa0);
background-size: 300%;
background-position: -100%, -100%;
animation: move 5s infinite linear;
}
#keyframes move {
100% {transform: rotate(360deg);}
}
<div class="y">
Any content here.
<div class="x">
</div>
</div>
I have an element, of id "r-u-ok". It's a pop-up and its content can have different word counts.
I want to set only the max-width, not the fixed width. A fixed width can't self-adapt to the content's word count. Besides, I also hope to vertical align it in the middle and horizontal align it to the center.
But even when I set 100% to max-width attribute, its max-width still is not the width of window, though it contains many words.
WHY?
Ignore my poor English.
#r-u-ok {
position: fixed;
/* display: none; */
max-width: 70%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
z-index: 99;
background-color: rgba(0, 0, 0, .8);
color: #fff;
box-sizing: border-box;
padding: 20px;
text-align: center;
border-radius: 10px;
font-size: 16px;
}
<div id="r-u-ok">
I think it should 100% width of this window, if the word more enough.
</div>
Here is an example: fiddle link
I think due to the position fixed, the div cannot grow as it would in normal document flow. To get over this, use an extra div - the outer div to position and the inner div can then grow with it's content:
#r-u-ok {
position: fixed;
width:100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
z-index: 99;
text-align:center;
}
#r-u-ok > div {
display: inline-block;
max-width: 100%;
background-color: rgba(0,0,0,.8);
color: #fff;
box-sizing: border-box;
padding: 20px;
text-align: center;
border-radius: 10px;
font-size: 16px;
}
<div id="r-u-ok">
<div>
I think it should 100% width of this window, if the word more enough.
</div>
</div>
Updated Fiddle
The problem is that with the left:50%, the system thinks you want to restrict the width to half of the window, even though you translate the whole thing by -50%.
So what you need to do is set the width explicitly. There is no other way. Otherwise you'd be stuck with this half.
Fortunately, width: 100% is not the only solution. What you can do is width: max-content, which does exactly what you need.
Unfortunately, it doesn't work in all browsers. IE and Edge will not comply. But most others will, if you provide the right prefixes.
#r-u-ok {
position: fixed;
/* display: none; */
max-width: 99%; /* changed */
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
z-index: 99;
background-color: rgba(0, 0, 0, .8);
color: #fff;
box-sizing: border-box;
padding: 20px;
text-align: center;
border-radius: 10px;
font-size: 16px;
/* added */
width:-webkit-max-content;
width:-moz-max-content;
width:max-content;
}
<div id="r-u-ok">
I think it should 100% width of this window, if the word more enough.
</div>
Just add width:100%
#r-u-ok {
position: fixed;
/* display: none; */
width: 100%;
max-width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
z-index: 99;
background-color: rgba(0, 0, 0, .8);
color: #fff;
box-sizing: border-box;
padding: 20px;
text-align: center;
border-radius: 10px;
font-size: 16px;
}
i have a demand, the element, which id is "r-u-ok",is a pop, has a several possibility of content's word count.it's judge by a ajax request's callback data. and i want the element only has a max-width, not a fixed width.a fixed width can't self-adaption
the content's word count, besides i also hope it is vertical align middle and horizontal align center. but, even i set 100% to max-width attribute, it's max-width still not the width of window, though it's contain many word. WHY?
<div id="r-u-ok">
I think it should 100% width of this window, if the word more enough.
</div>
I assume you want to display this div in full width. In order to do that:
Remove
max-width: 70%;
Add
width: 100%;
OR
width: 100vw;
I made my post thumbnail images of full width and responsive. Because they were so tall, I gotthem cropped at 600px. The problem is that as the screen gets bigger the images crop at the top, not in the center of the image as I want it. Is there any way to make the images crop in the center?
I don't want to use background-image here.
Here is a fiddle.
.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.large-front-container {
max-height:600px;
overflow: hidden;
}
<div class="large-front-container">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg" class="large-front-thumbnail">
</div>
.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translateY(-50%); /* add this line to move your picture 50% up*/
}
To use in all browsers:
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
But I'd suggest you to use background-image case described here
I am trying to full width video the following code is a example. I don't want to restrict video by giving it a height as it is responsive, but the content or above positioned over it is pushing down when i view it on small screen e.g. Mobile
How can i make sure the text over the video shows at the same position even when screen is small and the text or panel below it also hide behind or hide/overlap the video.
I want to make the text on video and below be decent and not jumping or hiding. Am i using positions wrong?
.centered{
position: relative;
top:50%;
z-index: 1;
color:#fff;
text-shadow:1px 1px 10px #000;
}
video{
background-size:cover;
width: 100%;
position: absolute;
top:0;
}
Make sure the parent element has position: relative; and contains the video, and the parent adjusts responsively with the video. I do this by getting the aspect ratio of the video and creating padding (56.2%) that creates space for the video's aspect ratio (using the technique from the iframe section here), then put the text in that parent element and use a combination of position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); to center the text over the video.
* {margin:0;padding:0;}
#video {
height: 0;
padding-top: 56.2%;
position: relative;
overflow: hidden;
}
#video video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#video h1 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
color: #fff;
text-shadow: 1px 1px 10px #000;
font-size: 36px;
font-family: sans-serif;
text-align: center;
}
<div id="video">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<h1>We Evolve with our students
</div>
I think this link will help you about centring anything ;)
About positioning text, you can use vh value. Ie.
.text {
position: absolute;
top: 30vh
}
Also, this guy from the top have a good example about absolute positioning ;)
Link about vh
Here is the css for the div with centerred class. Hope this will help you.
change the position to absolute and use the calc function to position the text to center from top
.centered
{
position: absolute;
top: calc(100% - 50%);
text-align : center;
left : 0;
right : 0;
z-index: 1;
color:#fff;
text-shadow:1px 1px 10px #000;
}