I added picture that is wider than viewport I lookat ,, somewhere 1000px wide ,, and I'd like it to be aligned in the middle somehow ..
The smaller picture of eye lower would need to be as is ..
I played with transform: translate(-50%,-50%); and align attributes and margin: -50% but I guess I'd need to use media queries for that ..
This is my blog:
http://blog.mk-dizajn.com/
thanks for any help ..
Just add this rules to your images and it will scale to your viewport
CSS
img {
max-width:100%;
height:auto;
}
But you should be sure that you dont have width and height attributes on your image tag
Add width = "100%" to the img tag.
<img src="http://blog.mk-dizajn.com/media/left_right_side_of_brain-1280x768.jpg" width="100%" alt="Are you right, or left :)">
see http://jsfiddle.net/9nMzK/
Try this:
<div id="image_container">
<img src="picture.png">
</div>
Then add this CSS:
#image_container {
position: absolute; /* Alternative get this relative to the parent */
left: 0;
width: 100%;
padding-left: 50%;
display: block;
float: left;
clear: both;
}
#image_container:after {
clear: both;
}
#image_container > img {
margin-left: -50%;
}
Explanation: You give the parent container a padding left of 50%. To get the image dynamically centered give the image a margin-left of -50%; This way you get it centered.
Give width to your image tag as 100%.Replace this code it will work
img {
display: block;
margin: 0 0 1rem;
border-radius: 5px;
width: 100%;
}
you need add you code css
img {
max-width:100%;
height:auto;
}
this technique will give your image resize when you change the screen size
Related
I'm trying to get exactly the same effect as here: Responsive images positioned over image , so I want my absolute positioned elements to stay in the same place but get smaller or bigger when the browser is being sized. I tried many different possibilites, before I worked with this code, but I don't understand why my wrapping container (id="wrapper") is placed under the image. And to get the question mark on the image I would need to use minus percentage. In the example I copied from another question in stackoverflow there are bootstrap styles. I don't know and I don't want to use bootstrap though. I will be very grateful for all suggiestions what I'm doing wrong.
#wrapper {
position: relative;
display: inline;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
This is my fiddle: https://jsfiddle.net/8obzf2c8/2/
inline elements doesn't get the height of the elements inside them.
You should remove the display: inline from the #wrapper element.
#wrapper {
position: relative;
margin-top: 150px;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
I also set margin-top to make sure the question mark image is in the viewport.
Your wrapper has property display: inline; so it behave like a fe. span element, it is not a block.
Change display: inline; to display: inline-block; so the wrapper behaves like inline container. You will also need to change this weird top: -43%; to fe. top: 43% as things will get more normal and predictable.
Use display:inline-block; instead of inline
#wrapper {
position: relative;
display: inline-block;
}
#questionMark {
position:absolute;
left:33%;
top:43%;
max-width: 10%;
}
This will make the image placed in the center and will also be responsive with all screen sizes.
#wrapper {
position: relative;
display: inline-block;
}
img{
width: 100%;
height: auto;
}
#questionMark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
Hope this helps,
I have a image on div. The image is dynamic added via CMS.
<div class="banner_page">
<img src="banner.jpg" />
</div>
CSS:
.banner_page{
height: 200px !important;
left: 50%;
max-width: 1920px !important;
top: 0;
position: relative;
margin-left: -993px;
width: 100% !important;
}
Once I start squeezing the browser the image exceeds the horizontal bar and I need to scooll horizontally to view the image. How can I make it responsive?
Add the CSS:
.banner_page img{
width:100%;
}
This will restrict the img width to the same as that available for the parent element, .banner_page_img
Demo Fiddle
Try using .banner_page img { width: 100%; } as then it'll fill it's parent
If you also want to constrain proportions add this :
.banner_page img{
width: 100%;
height: auto;
}
I feel like this is an easy fix but my code isnt working and I'm not sure why.
I want to align the 'voip innovations:your premier wholesale voip carrier' image to the bottom of the div. I made the bottom green for reference.
I tried
#cityBackground{
position:relative;
display:table-cell;
vertical-align: bottom;
background-image:url(../images/city_background_line_vi.jpg);
background-repeat:repeat-x;
height:500px;
background-color:green;
}
#cityBackground img{
vertical-align:bottom;
display:block;
margin-left: auto;
margin-right: auto;
}
But it doesnt seem to work.
Here is a link to the site
Link
Is there something I'm missing here?
EDIT -
Sorry I didnt explain clear enough. I dont want the background-image moved down. I want the logo moved down.
Picture for reference
The CSS property background-position controls where the image sits, not vertical-align. Vertical-align is for content. A background image is not content.
You could absolutely position the img element relative to to #cityBackground.
#cityBackground img {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -174px;
}
Since the img width is fixed, you could use left:50% and margin-left:-174px to center it horizontally. The value -174px is half the img width.
Can try with adding margin-top to the image.
#cityBackground img {
display: block;
text-align: center;
width: 348px;
margin:436px auto 0 auto;
}
this is your code check this one
#cityBackground img {
position: absolute;
bottom: 0px;
left: 40%;
right: 50%;
}
Hey guys I am working on this responsive horizontal gallery, but now I have a dilemma.
I am trying to get 4 list items on a single shot (viewport).
The images are somehow not stretched to the full height.
Have a look and please tell me if my image size is not fine or something like that.
I need at least 4 images on a single shot.
Thanks
FIDDLE
li {
display: inline-block;
max-height: 100%;
width: 25%;
}
li img {
max-width: 100%;
}
Code looks something like this. Please check fiddle. thanks.
Something like this Link
Here's my answer:
http://jsfiddle.net/SKEL2/14/
I set all the widths to be 100% of the window (INCLUDING html and body), this might be a problem if you have other scrollable elements inside the page.
after that I just positioned the images inside the with position absolute, and gave them a height of 100% (this will stretch them to the bottom of the container, keeping the aspect ratio constant).
To keep it centered I used the
top: 50%;
transform: translateX(-50%);
trick, that will keep an absolutely positioned element in the center of the container (as long as the container has position: relative)
I hardcoded a
min-width 420px;
to avoid the white borders around the images when the window became too small.
Hope this helps
Check this fiddle: http://jsfiddle.net/SKEL2/15/
*{
height:100%;
}
body {
width:100%;
margin: 0;
padding: 0;
}
slides {
width: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
ul {
width:100%;
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
}
li {
display: inline-block;
max-height: 100%;
width: 25%;
background-image:url('http://beautifulsoftwares.com/scroll/img/2.jpg');
background-size:cover;
background-position:50% 50%;
}
li img {
max-width: 100%;
}
background-image:url(''); - Sets an image to the element
background-size:cover; - Property to cover the entire width and height with image
background-position:50% 50% - Centers the image
I am trying to position an div element at the bottom right of an image, that is inside a container element. I set position relative to the container, and position absolute to the inner div, but it does not work. Here is the (http://jsfiddle.net/ZC84G/). Please, help.
<div class="container">
<div class="icon"></div>
<img src="/images/someImage.png" />
</div>
CSS:
body {
background-color: black;
}
.container {
position: relative;
}
.container img {
max-width: 75%;
max-height: 80%;
}
.icon{
background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
width: 31px;
height: 31px;
position: absolute;
bottom: 5px;
right: 5px;
}
This is because by default div has block display mode, and it's width is 100% of the parent container. Try to add display: inline to .container
.container {
position: relative;
display: inline;
}
Here's the corrected jsfiddle: http://jsfiddle.net/ZC84G/4/
Your container div has no width and height set. And since a <div> is a block-level element by default, it will be set to 100% width ie expand to however much horizontal space is left.
Plus, you're also constraining your image size:
max-width: 75%;
max-height: 80%;
If you replace the img CSS with:
max-width: 75%;
max-height: 80%;
It works fine, and as expected: http://jsfiddle.net/ZC84G/3/
I've modified your CSS on the image a bit.
Basically, I set it to scale properly to the size of its container, and now it sits where I think you wanted it. The way you could find this yourself in the future would be to inspect the element by using right click from your browser, and looking at the size of the different elements to see what was expanding larger/smaller than it should.
.container img {
max-width: 100%;
height: auto;
}