I have an img which I want to align at the top right corner. If the window is too small, I don't want the image to overlap the text, but make the window scrollable. So I've made a div width max-width: 1000px;.
This is what I have now
<div style="z-index: -1; width:100%; position: absolute;">
<div style="width: auto; min-width: 1000px; display:inline-block;"></div>
<div style="display:inline-block; float: right;">
<a href="#" id="a_logo_hoek">
<img src="xx.jpg" style="float: right; margin-top:-30px;" />
</a>
</div>
</div>
How about something like this:
<div style="width: 100%; min-width: 1000px; display:inline-block;">
<div style="display:inline-block; float: right;">
<a href="#" id="a_logo_hoek">
<img src="xxx.jpg" style="float: right; margin-top:-30px;" />
</a>
</div>
</div>
Set the div that contains your img to have a min-width of 1000px and a width of 100%.
to make window scrollable use overflow:auto; in that div which contains all of your page elements.
to position the image at top right use position: absolute ; top: 0; right: 0;
and now you dont need to use min-width: 1000px;
here is your code::
<div style="z-index: -1; width:100%; overflow:auto;">
<div style="width: auto;display:inline-block;"></div>
<div style="display:inline-block; position: absolute ; top: 0; right: 0;">
<a href="#" id="a_logo_hoek">
<img src="xx.jpg" style="float: right; margin-top:-30px;" />
</a>
</div>
</div>
Related
I want to make a nav bar in the footer with images. The footer needs to be 10% of the total screen and the images need to be within those 10% as well. Only I don't get the images scale according to the screen size and are way bigger. What am I doing wrong?
I am using Bootstrap 4 and I intent to make a mobile version of my website but it is not displaying good.
<div class="footer navbar row">
<div class="col-sm-2 menu_item">
<a href="#home" class="active">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: var(--primary-color-1);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
height: 10vh;
}
/* Style the menu blocks */
.menu_item {
position: relative;
padding: 2px 10px;
margin: 0px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
text-align: center;
text-decoration: none;
}
/* Style the images/icons of the links */
.menu_img {
height:100%;
width: 100%;
object-fit: cover;
}
responsive img's need width: 100%; to be responsive, you can control the image size with his container, for example:
<div class="img-container">
<img src="imgUrl"/>
</div>
img{
width: 100%;
}
.img-container{
width: 10%;
}
I found the solution. My structure is like
<div class="footer">
<div>
<a>
<img>
</a>
</div>
</div>
The footer div needs to be height:10%. But I need to set the height of all the other elements to 100%(which I didn't do before). Otherwise it will extend outside those. 'borders'
Say I have a div with fixed dimensions
<div class="cell" style="width:150px; height:150px"></div>
If I want the image to be not wider and not higher than the div, but keep its original aspect ratio I can set max-height and max-width to 100%
<div class="cell" style="width:150px; height:150px">
<img src="" style="max-height:100%; max-width:100%">
</div>
However, in my case I want the img to be wrapped in a div. The reason is, I want to place some elements on top of the image, and position them relatively to the image:
<div class="cell" style="width:150px; height:150px">
<div class="image-button-wrapper" style="position:relative">
<img src="" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px"></button>
</div>
</div>
However once I wrap the image in a div it only respects the max-width property, but not the max height, So the image (and the wrapper) overflow the cell in vertical direction.
possible solution:
I read that for max-height to work I have to set the parent's height explicitly. But how would I do that, since I want its dimensions to be identical to those of the image?
While playing around with in the browser I realized that setting the wrapper width and height to "fit-content" solves it. But this is quite uncommon value. Is that the simplest solution?
I'm adding a code snippet where you can see how the max-width is obeyed while the max-height isn't
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
I added expected result. The only difference is making the wrapper's width and height "fit-content".
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative; width:fit-content; height:fit-content">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
You can use background-image:
.cell{
background-image: url("https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px">
</button>
</div>
img{
width: 100%;
height: 100%;
}
.image-wrapper{
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative;">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style>
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
Is this what you wanted??
It can be solved in many ways, it depends on what you prefer.
What you did is already correct, just add height: 100%; to the image-wrapper:
<div class="cell" style="width:150px; height:50px;border: 3px solid red">
<div class="image-wrapper" style="position:relative; height: 100%;">
<img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
<button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
</div>
</div>
Explanation: The image-wrapper div has width of 100% (by default, since div is a block and blocks have default width of 100%) but no specific height. When you set height for wrapper to 100%, it considers its parent's height (the cell's height), so then, the image will respect its parent height (the image-wrapper's height).
I am jumping into a large complex application today and it's a bit daunting.
So, I want to solve the issue locally then find where the solution should eventually be located.
I have square images that come from sources of various sizes. Currently the image fills the div regardless of its dimensions.
<li class="hint-li" data-position="undefined" data-id="551ef3279934asda2e2565" id="551efsfasd8354582e2565" style="background-image: url(http://s3.amazonaws.com/source/558dadasd9a0f3.616asd74.jpg);">
<div class="sold-out hidden">
</div>
<div class="partnered hidden">
</div>
<div class="overlay">
<div class="row">
<div class="col">
<strong>
Thermal bath, aromatherapy, massage
</strong>
<em>
Aire Ancient Bath
</em>
<strong class="hintPrice">
$181
</strong>
</div>
</div>
</div>
<div class="options">
<div class="row">
<div class="col">
<a target="_blank" class="buy" href="http://www.ancientbathsny.com/aire-services/thermal-bath-with-aromatherapy-and-relaxing-30-minutes-massage/">
Buy
</a>
<a target="_blank" class="hint">
Hint
</a>
</div>
<div class="col">
<ul>
<li>
<a class="twitter" target="_blank">
<span class="sprite twitter-alt">
</span>
</a>
</li>
<li>
<a class="facebook" target="_blank">
<span class="sprite facebook-alt">
</span>
</a>
</li>
<li>
<a class="email">
<span class="sprite email">
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
Here is the CSS that effects these image sizes:
.grid>ul>li {
width: 247px;
height: 250px;
background-position: center;
background-size: cover;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
vertical-align: top;
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px 1px #ddd;
box-shadow: 1px 1px 1px 1px #ddd;
}
I'm trying to center the image within the div and have the remaining space be white space:
I have tried various approaches such as:
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
But it is breaking their format on the page.
How do I get the desired behavior?
As in this JS Fiddle these lines should be in your .grid>ul>li css:
background-position: center center;
background-repeat:no-repeat;
background-size: contain;
background-color:white;
EDIT: My answer is not actually applicable to OP, but I will leave it here in case someone is looking to center img elements as OP described in the title.
Wrap the following class around each img attribute:
.example-wrapper img {
text-align:center;
transform: translateY(-50%);
top: 50%;
height: auto;
max-width: 100%;
max-height:100%;
position: relative;
background-color: white;
}
extra option: "text-align:center;" above can be replaced with:
display: flex;
justify-content:center;
HTML
<div class="example-wrapper">
<img ....>
</div>
I'm trying to add some hover effect on some images I got.
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
</div>
When I hover the div with the overlay class I want another image to hover on top of the imagetag..
I've got the following css:
#horizontal_list{
margin-top: 18px;
height: 330px;
}
.grid_3{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first{
margin-left: 0px !important;
}
.last{
margin-right: 0px !important;
}
.overlay{
height: 330px;
}
.overlay:hover{
background: url('path') no-repeat;
}
I'm not sure what you mean by 'imagetag' but here is what I think you mean:
What you can do, is adding the second image in your html:
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
</div>
And in your CSS:
.overlay {position: relative;}
.overlay:hover a img.sec_img {display: none;}
.overlay:hover a img.sec_img {
display: block;
position: absolute;
background: url(path) no-repeat;
top: 0;
left: 0;
width: [imgwidth]px;
height: [imgheight]px;
}
Be sure to change [imgwidth] and [imgheight] into the correct dimensions.
HTML
<div class="hoverholder">
<a href="#" class="picone">
<img src="#" alt="" />
</a>
<a href="#" class="pictwo">
<img src="#" alt="" />
</a>
</div>
CSS
.pictwo {display:none;}
.hoverholder:hover .picone{
display:none;
}
.hoverholder:hover .pictwo{
display:block;
}
In the theme which i'm using has this code
<div id="header">
<div class="container section header clearfix">
<a id="logo" class="logo" rel="home" title="Home" href="/xx/">
<img alt="Home" src="http://192.168.1.1/xx/sites/default/files/logo_0.png">
</a>
<div id="user-links" class="clearfix"></div>
<div id="name-and-slogan">
</div>
<div class="region region-header">
</div>
</div>
</div>
I just need move the logo on to the left side bit. using css
please advice;
did you try:
#logo {
display: block;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
. clearfix {
clear: both;
}
You'll need to replace the width, height and margin values with whatever your logo size is. You can adjust the margin to whatever you like.