vertical-align and background-position CSS not working with JS - javascript

I'm trying to vertically crop an image inside a div and I'm having trouble getting the vertical-align and background-position styles to register and work...
I've tried using vertical-align, background-position, background-position-y, I've tried calling the background image url inline in style, and nothing is working correctly...
The images are being called in the HTML within a js file:
<div class="product-image-wrap" data-slider-quickview="">
<img src="${result[i].images[0].src}" class="variant-image-${result[i].images[0].id}" alt="">
</div>
and the CSS is as follows:
.product-image-wrap {
overflow: hidden;
border-radius: 8px !important;
padding: 12px;
width: 100%;
height: 170px;
background-position: center, center;
background-repeat: no-repeat;
}
.product-image-wrap .img {
display: inline-block;
width: 100%;
height: 170px;
vertical-align: middle;
}

Not sure I understand what you want to achieve, maybe you want to change the height of the wrapper but contain the aspect ratio of the image? In this case you can use object-fit: cover; on the image, then you can change the height of the wrapper div freely:
div {
overflow: hidden;
border-radius: 18px;
padding: 12px;
width: 100%;
height: 170px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg">
</div>

Related

Is there a way to have a responsive parallax image always take 100% of the viewpoint?

I've been following this solution to add responsiveness to my parallax images in my right grid. The responsiveness is working fine except the image doesn't takes up the WHOLE viewpoint.
I have put a red border around the image to show this: https://jsfiddle.net/65r3bth1/3/
When it becomes responsive, the image doesn't fill up the left side of the viewpoint unless I change the background-size and mess around with my background positioning. Is it possible to ensure my image takes up the whole viewpoint while maintaining its responsiveness?
.image-greet {
background: url("http://placekitten.com/g/800/800")
calc(75% + 120px) 50px /120px auto;
/*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
border-top: 20px;
background-size: 40% auto;
width: 78%;
height: 12%;
margin: 15% auto 0;
background-attachment: fixed;
background-repeat: no-repeat;
border: 1px solid red;
}
Is it possible to ensure my image takes up the 100% of the viewpoint while maintaining responsiveness in its original background position?
Thank you!
The solution that you are following can be achieved with CSS, without the need for JS, as you can see in this fiddle. Hope this helps!
.body {
display: flex;
}
.container {
border: 1px solid red;
width: 100%;
height: 400px;
margin-top: 50px;
}
.sidebar {
height: 2000px;
width: 50px;
background-color: #333333;
margin-right: 30px;
}
.bg {
background: url('https://loremflickr.com/320/240');
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
display: block;
}
<div class="body">
<div class="sidebar"></div>
<div class="container">
<div class="bg"></div>
</div>
</div>

Why do my divs have this mysterious right margin?

I am trying to align divs #inner3 and #inner4 side by side, but they refuse to cooperate. When I inspect the DOM through Chrome, there is this mysterious right side margin on both divs that extends to the end of the page.
I have the global margin set to 0, but when I look deeper it says that there is no value for margin, period. Why?? Why won't my divs cooperate either? I have removed white space, made them smaller, floating, all to no avail. I have been searching and struggling for over 2 hours now.
Note: the overflow-x is for the animation; the background CSS is for the parallax.
body, html {
height: 100%;
overflow-x: hidden;
margin: 0em;
}
#section2 {
height: 500px;
width: 100%;
background-color: black;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px;
display: inline-block;
font-size: 0;
}
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
}
Code: https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100
Page: https://codepen.io/hungus--bungus/full/rdgEze
Photos are taken using the Chrome "Inspect" feature, and information can be found in the "Computed" tab at the bottom after selecting the element.
Adding display: inline-block; to #inner3 and #inner4 will put them side-by-side.
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}

How to set height div css for 16:9 aspect ratio in portrait mode for Ionic 2

Suppose I have a div that is on top of the ion-content. I'm trying to set the height of the div by getting the width of the device and calculate it so that the aspect ratio is 16:9 just like the youtube app. However, I have no idea how to achieve it using css. For now, this is what I have.
div {
width: auto;
max-height: 40%; <-- how to set this height so that it is 16:9
background: black;
div.img {
width: 360px;
max-height: 202.5px;
}
What I wanted:
You just need to use this simple css Style
56.25% = 16:9 Aspect Ratio
.img {
width: 100%;
height: 56.25vw;
}
First: your source images need be 16:9.
Than you can as simply as :
div {
width: auto;
max-height: 40%;
background: black;
div.img {
height: 100%;
}
Of course if that css corresponds to a properly nested <div><img...></div> structure.
¿Can you set the image as background-image? In that case you could use this:
The HTML:
<div class="container">
<div class="header" style="background-image: url(https://placehold.it/1200x600)">
</div>
<div class="content">Content here</div>
</div>
And the CSS:
.container {
width: 960px;
max-width: 90%;
margin: 20px auto;
border: 1px solid #ddd;
}
.header {
position: relative;
width: 100%;
padding-top: 56%;
background-color: rgba(#f00,0.1);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
overflow: hidden;
}
.content {
padding: 30px;
}
Here you can see it in action: Codepen
Hope it helps!!

How to fit img into div circle ?

I'm beginner in HTML/CSS.
I've created some div that looks like a circle. I want to put facebook image into that circle, but as a circle logo.
HTML
<div class="social" id="social1"> Facebook
<a href="www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106"/>
</a>
</div>
CSS
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align:center;
}
img {
width: 100%;
height : 100%;
object-fit: contain;
}
How to fit img into div circle ?
.social .facebook {
display: inline-block;
width: 100px;
height: 100px;
background: url(https://www.facebook.com/images/fb_icon_325x325.png);
background-position: 50% 50%;
background-size: cover;
border-radius: 50%;
}
<div class="social" id="social1">
<a class="facebook" href="https://www.facebook.com/"></a>
</div>
Basically there are two ways to achieve this.
You could add border-radius: 50%; to the img element.
You could add overflow: hidden; to the div element.
Both will work. You should remove the "Facebook" string to get proper positioning of the image.
You were very close. The text content "facebook" of the DIV is taking up room and needs to be removed. It can be replaced by alt text to display if the image is not available, with a title attribute that typically displays as a tooltip. Height and width are not needed for the IMG element since it is specified in CSS:
<div class="social" id="social1">
<a href="https://www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png"
alt="facebood" title="facebook">
</a>
</div>
Besides this you only need to add overflow: hidden as a property for the div CSS
Alternatively if you want to support IE and Edge which (from #Blazemonger 's comment) don't support object-fit, you could add the image as a background attachment of the DIV and make the DIV itself the link element's content (without an alt text option):
HTML
<a href="https://www.facebook.com">
<div class="social" id="social1" title="facebook">
</div>
</a>
and include
background-image: url("https://www.facebook.com/images/fb_icon_325x325.png");
background-size: cover;
overflow:hidden;
in CSS for the div element.
overflow:hidden; + position:relative/absolute to not mind the text aside image :
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="social" id="social1">Facebook
<a href="www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106" />
</a>
</div>
You could set a border radius in CSS to round the image like so:
img {
width: 100%;
height : 100%;
object-fit: contain;
border-radius: 999px;
}
Example: http://codepen.io/JasonGraham/pen/zBGYgx
Well you can do this :
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
background: url("https://www.facebook.com/images/fb_icon_325x325.png") center no-repeat;
background-size: cover
}
<a href="https://www.facebook.com/">
<div class="social" id="social1"></div>
</a>
img{
border-radius: 100%;
object-fit:cover
}
This will position the image so that it appears centered and cropped and round its edges.
Add border-radius:100% to your img css code segment as well.
img {
width: 100%;
height : 100%;
border-radius:100%;
}

Horizontally fix background image to logo in header

my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;

Categories