I would like for the image B to be fluid like the Image A, while mainlining it's center position of Image A.
Here is my sample code:
<div class="container">
<img id="imgA" src="A.png" />
<img id="imgB" src="B.png" />
</div>
CSS:
#imgA{
display: block;
width: 100%;
height: auto;
position: relative;
}
#imgB{
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
width: 400px;
height: 200px;
}
With above code, I only can achieve image B to be the center of Image A while the resolution is high enough, but when it gets lower, image A will adjust to it's screen but image B remains the same. What do I need to add for image B to be fluid and be the center of image A at any resolution?
You need to calculate the offset of the second image in %, not in pixels, and make sure their sizes are relative to the container div. I created a js fiddle with an example: http://jsfiddle.net/BX6u7/
<div class="container">
<img id="imgA" src="http://placehold.it/350x150" />
<img id="imgB" src="http://placehold.it/150x50" />
</div>
and css:
.container {
margin: 0 auto;
position:relative;
width: 50%;
background-color:yellow;
}
#imgA{
display: block;
width:100%;
max-width:100%;
height:auto;
border:none;
}
#imgB{
top: 28.6%;
left: 21.6%;
width: 57%;
max-width: 57%;
border:1px solid white;
position: absolute;
}
You should not be using hard-coded px units, instead go for %.
Replace margin,width and height attributes with respective % values. '%' to be determined as per your image sizes and your requirement.
Related
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
So I have a 300x300 square container and an <img src="" /> image inside.
What I want is the image to cover the whole container, but keep its width/height ratio.
If the width of the image is smaller than its height (portrait), it should have 100% width and a part of the height to be cropped.
If the height is smaller than the width (landscape), it should have 100% height and the extra width to be cropped.
I can easily fit the images in the container if they're all landscape or all portrait by setting the width or height to 100% and respectively the height or width to auto:
.container {
border: 1px solid black;
margin: 30px;
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
<div class="container">
<img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="container">
<img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>
but is there any universal HTML/CSS ONLY approach to make it automatically cover the container regardless the orientation?
Note 1: The inner image should not be distorted in any way. It should only fit the container by the rules described above.
Note 2: I'm curious about an approach that doesn't imply background-image: url('')
Try this
.container {
border: 1px solid black;
margin: 30px;
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
}
img {
width: fit-content;
min-height:300px;
}
<div class="container">
<img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="container">
<img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>
I have tried what Sitaram suggested in the comments section of the question and it seems to be the optimal solution.
Besides the fact that the images would cover the entire square, they would cover the container regardless the width or height.
Snippet:
.container {
border: 1px solid black;
margin: 30px;
display: inline-block;
width: 300px;
height: 300px;
overflow: hidden;
resize: both;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="container">
<img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>
How to have an image in angular 2 like the one above, taken from facebook marketplace. The one I need is the black on, bottom-left.
Create a wrapper div around the image that has a position set to relative, and then create the overlay as a child div, with position set to absolute.
That will position it relative to the container
Here is an example:
.img-container {
position: relative;
}
img {
width: 500px;
}
.overlay {
display: inline-block;
color: white;
background-color: rgba(0,0,0,0.8);
padding: 10px;
border-radius: 10%;
position: absolute;
bottom: 20px;
left: 20px;
}
<div class="img-container">
<img src="http://greenwoodhypno.co.uk/wp-content/uploads/2014/09/test-image.png" />
<div class="overlay">
$75
</div>
</div>
I am trying to resize an image and keep it in the middle of the page.
I have tried <center> and align="middle" and many other things I've found on here that didn't help.
Here is an example of the page (How I want it to be but without the text, background etc):
https://gyazo.com/5943303da90127d4e5bf24989812888e
And here is how it is currently:
Small Image: http://i.inf.vg/qkYCd
Medium Image: http://i.inf.vg/3AtgG
Large Image: http://i.inf.vg/E6b0r
img {
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
transform: translate(-50%, -50%);
}
<img src="//i.imgur.com/7xYQq8P.jpg" />
.container {
width: 100%;
height: 100%;
display: table;
}
.container .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="container">
<div class="inner">
<img src="http://i.inf.vg/images/png/3AtgG.png">
</div>
</div>
You could use media queries to change the image on different sized devices.
codepen: http://codepen.io/pen/
I'm using iosslider but can't seem to show just one image in the slider at a time. I'm also trying to center the single image shown. Here is what I have for HTML:
HTML:
<div class = 'iosSlider'>
<div class = 'slider'>
<div class="item">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
My CSS looks like this:
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 300px;
border: solid 1px #ff0000;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
width: 100%;
height: 100%;
}
.iosSlider .slider .item img {
width: auto;
height: 300px;
border: solid 1px #00ff00;
}
I'm basically trying to show just one centered image at a time in the slider. Below is what I currently see. As you can see the image to the right is also shown.
Any idea how I can do this with my CSS?
Try resizing the window and you'll see my issue. I'm running this on a mobile webpage that has 320x480 resolution.
Give the images width/height of 100% and you can also position them absolutely:
.iosSlider .slider .item img {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
border: solid 1px #00ff00;
}
Ok do one thing use javascript or jQuery here to loop through your set of images.
Now add another class to the centered or focused image when jQuery function selects it like <div class = 'iosSlider'>
<div class = 'slider'>
<div class="item current">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
and when the next image got focus, remove this class "current" from 1st image and apply to 2nd one and so on.
And wrtite css for this class current liek allign: center; margin-left:auto; margin-right:auto; and other necessary css.