I have the width and height of image A,
and I want to change the aspect ratio of image B to have the aspect ratio of A without any container element, such as div, a, etc.
Then, How does image B have the aspect ratio of A without any container element?
If you want to change the aspect ratio without a container, you can use a transform on image B. This will of course distort the image, but that's kinda unavoidable since you are changing the aspect ratio.
A scale transform will shrink or expand an element by a multiple you specify.
In order for this to work, you need to know how image B's size relates to image A's. This won't be totally automatic.
In the example below, we have two images: A. is 200x300, and B. is 400x100.
We want B to become the same size as A, so we need to cut B's width in half and multiply its height by 3. In CSS, that means we do scaleX(0.5) and scaleY(3.0).
The end result is this:
img:nth-child(2) {
transform: scaleX(0.5) scaleY(3.0);
}
<img src="http://placehold.it/200x300">
<img src="http://placehold.it/400x100">
You can also pick different numbers to get the same aspect ratio but not have the two images be exactly the same size. For example, transform: scaleX(0.25) scaleY(1.5) would give you image B at image A's aspect ratio, but half the size of image A.
You can try height: auto CSS attribute. Even when the HTML attributes width and height are not keeping aspect ratio, height: auto CSS will fix this.
.minisize {
height: auto!important
}
Demo of my code. Even when width is 300px and height is 1px, it still show an smaller image that keeping aspect ration: https://jsfiddle.net/99qrn65L/
Related
Is it possible to have an image of arbitrary dimensions fit within a given width and height, but without using a fixed container?
Obviously it's easy enough to create a container of specific dimensions and have an img fit within that, however that potentially leads to additional whitespace within the container along the dimension where an image's aspect ratio is shorter or taller than the container.
Is it possible to tell an image:
it should be as large as possible
maintain its aspect ratio
never exceed width of a
never exceed height of b
contain no whitespace
To be clear, this needs to involve only CSS and no knowledge of the images' dimensions at runtime.
img{
object-fit: cover;
}
you can check more about object-fit here
You can achieve this using the CSS Property object-fit: cover;.
That will tell the image to maintain its aspect ratio, never exceed the containers width and height and not have white space, but in order to keep the aspect ratio and still fit within the container without white space it will cut off the sides of the image.
I just want to create image with title and button on top.
Text and button should be in container with set width. I just want to know what is the best way to do that.
There are lots of way that makes you confuse on internet and I don't know which one is best!
If your background image has always the same aspect ratio, you can make the height of the container proportional to the width of the background image.
Let's say your background image is 2000 x 1000 px. And let's say the screen is currently 800px wide. Then you want the container with the background image to be 400px high. To achieve this without setting hard coded breakpoints, you can use the "padding trick". If you set the padding (top or bottom) of a child element in percent, it calculates the height as a percentage of the parent element's width. So if you set the the container's padding-top to 50%, it will be half as high as the the parent element is wide. So in the case of 2000 x 1000 px: 1000 / 2000 * 100 = 50%.
.parent_w_bg {
background-image: url(...);
width: 100%;
}
.container {
width: 500px;
margin: 0 auto;
padding-top: 50%; // Assuming the background image's aspect ratio is 1:2
}
<div class="parent_w_bg">
<div class="container">
Header and button etc.
</div>
</div>
In such a scenario you should position the container relatively and it's children absolute, for example the header with a top value and the button with a bottom value.
Here a simple fiddle: https://jsfiddle.net/mmcc5rnk/
Using multiple image sizes for different breakpoints can be useful, but also problematic. Depends on your specific case, the size of your image(s) and the amount of breakpoints you want to use (and the differences). Using different images according to some specified breakpoints is fine and can be used regardless of the implementation.
Setting a height for an entire section is never a good idea, unless specified in the project requirements. Always depend on the inner content to stretch your section vertically.
About the background - if you are using multiple images, you can apply different sizes and positions for them in one common background setting so that they can scale an re-arrange when the viewport resizes, or if you have one big image, you can simply set the image background size to cover like so:
background: url('images/image.jpg') no-repeat center center/cover;
There are many ways to achieve your goal, but the most up to date way of doing things is using the Flexbox model.
All flexbox properties must be prefixed, so they can work across all browsers.
Explaining how Flex works is too broad for an answer, so you will have to learn it from the ground up.
Here is a Fiddle that represents your aim.
No need to add different images for each breakpoint,
image will resize automatically, you can add dynamic height by using jQuery
Demo here
I'd like to make an image always be at least 600px height, but still maintaining at least 100% width (while keeping aspect ratio). Over flow on either side is fine. I just want the image to always fill the full width of the screen and always reach at least 600px in height.
It's hard (maybe impossible) to achieve what you want. You will have to choose two of the three options (aspect ratio, width, height).
One way to do it would be this, but it can break aspect ratio:
img {
min-height: 600px;
width: 100%
}
I have an image within a wrapper div. I need to restrict the height of the image to no greater than 150px. The width of the image cannot exceed the width of the parent div (the wrapper). If either the width or the height reaches its limit, the other dimension should not increase anymore so as to preserve the original proportions of the image.
I am manipulating the CSS for the image with id #frameImage and the CSS of the wrapper div with id #imageWrapper:
#imageWrapper
{
height: 150px;
width: 100%;
}
#frameImage
{
max-width: 100%;
max-height: 150px;
}
Visually, this seems to work for images that have at least one dimension that exceeds one of these limits. However, I have some images whose true heights are less than 150px and whose true widths are less than the wrapper div. In this case I want to blow up the image to dimensions beyond it's natural ones until its height hits 150px or its width hits the width of the wrapper.
In its current state, these small images as I have described in the paragraph above keep their original size and tuck themselves into the upper left corner of the parent div without expanding to meet one of these limits.
I have been messing around for a few hours with auto and 100% heights and widths without ever getting the result I want.
Is there a simple way to achieve this that I am missing? Thanks!
remove the max preffix, from both declarations in the #frameImage, that forces the image to those values
Basically all I want is a whole bunch of images just one under each other. All these images are very different sizes and aspect ratios. I want all the images to be a maximum width and a maximum height without changing the aspect ratios of each image. How would i do this using html 5 and css3?
Take a parent block, for example a div with a class name main_div and then add this CSS
.main_div img {
width:100%;
height: auto;
}