Container:
Image parent:
Image:
Example: https://codesandbox.io/s/q4q6lwj719
The image on the right (and a couple of css rules) makes left image render larger than its natural size. But its parent doesn't scale with it and is sized as if the image was rendered in its natural size.
Seems weird to me. Am I missing something?
NOTE: Some times (seems to be random) it's fixed in Chrome (v72.0.3626.119). In Firefox (v65), it's always broken.
It's because of the first element style <div style="display: flex">. By default the style align-items sets to stretch so your image makes larger than its natural size. Use the style align-items: center; or set it to baseline or whatever you want to prevent changing the size.
body {
font-family: sans-serif;
}
.item {
display: inline-block;
max-height: 250px;
}
.item img {
height: 100%;
}
<div style="display: flex; align-items: center;">
<div class="item video">
<img
alt="Quiz of Kings (بازی آنلاین)video"
src="https://www.conti-engineering.com/CMSPages/GetFile.aspx?guid=6f8b829a-e0a5-49e1-9882-122d1d3efb06"
/>
</div>
<img
class="item"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgKNQKR-foUvskwO90hnlG_pyTQfeMsyIaFfJiWQV_AkTc8TPB"
/>
</div>
Related
So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem?
Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.
Thank you in advance for the help and
HTML
<div class="hottest">
<div>
<img src="img/main-page/444.jpg"/>
<p>J-Cole: KOD</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/444.jpg" />
<p>Jay-Z: 444</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/hus.jpg" />
<p>J-Hus: Big Conspiracy</p>
<button class="btn3">Check out </button>
</div>
</div>
CSS
.hottest {
display: flex;
justify-content: space-between;
color: white;
margin: 3vw;
margin-bottom: 10vw;
width: 100%;
}
.hottest p {
padding-left: 1vw;
margin: 1vw;
font-size: 3vw;
}
.hottest .left {
float: left;
margin-right: 2vw;
}
.hottest a {
text-decoration: none;
color: black;
}
.hottest img {
width: 70%;
}
the image width is 70% of it parent width, and the text makes the parent width bigger because you are using flex. flex makes the div width only as big as the content.
try giving your divs flex-basis: 100%; which should give your divs equal widths.
The text text would enlargen your parent div container. If you set the divs to a specific width and height, does the problem still occur?
Adding < a href> to images makes the box around the image larger and forces the text on the right hand side of the image further right. I would like to make the image link to another page while keeping the current format.
I tried adding to the image (alt is connector) (shown below), but it didn't work. (https://www.w3schools.com/html/html_images.asp - Image as a Link
uses around ).
I would expect adding the to the image would simply make the image link to another page, but it changed the size of the box for the image and pushed the text to the right of the image further right.
Page: https://www.flexsweep.com/pages/aboutourproducts (shows layout as it should be - provides access to inspect if needed.)
/*Image and Advantages*/
.content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 50%;
margin-right: 70px;
}
.details {
width: 50%;
}
<div id="PushBrooms" class="tabcontent">
<p>Intro text.</p>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
<div class="details">
<p>
More text.
<div>Shop Push Brooms →</div>
</p>
</div>
</div>
<!-- Attempt to add link to image -->
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
IMG tags behave special as they are a mixture of "block" (have height and width) and "inline" (float around text) elements. Here's some good information about this topic if you want to learn more about it.
Images in <a> tags have an extra bit of padding at the footer which you can get rid of by applying display:block; to the element. Also make sure that there is no extra margin or padding applied by some other rules:
a img {
padding: 0;
margin: 0;
display: block;
}
Here's a demo with some colored backgrounds to show you which element applies padding or margin.
The original image is sized at 50% width from the CSS rule on .content img. This only affects img tags that are descendants of elements with the content class. If you apply content to the link, it will work as you expect.
Edit: Noticed this will not work if you place it inside all inside another content container because the relative width is calculated from the parent, which in the second case will be the a element and not the content div. I updated the snippet to size descendant links of content to be sized at 50% width and the contained images to be 100%.
To address the small amount of padding at the bottom of the link, you can use the solution provided in Sascha's answer
/*Image and Advantages*/
.content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 50%;
}
.link-wrap {
width: 50%;
}
.link-wrap img {
width: 100%;
}
.details {
width: 50%;
}
<div id="PushBrooms" class="tabcontent">
<p>Intro text.</p>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
<div class="details">
<p>
More text. </p>
<div>Shop Push Brooms →</div>
</div>
</div>
<!-- Attempt to add link to image -->
<div class="content">
<a class="link-wrap" href="www.flexsweep.com"><img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" /></a>
<div class="details">
<p>
More text.</p>
<div>Shop Push Brooms →</div>
</div>
</div>
I need the image to take the entire width of the container unless the resulting height is bigger then the available container's viewport height.
Basically I want the image to be responsive but also that it should still fit the screen. If it doesn't fit the screen it should be scaled down, horizontally centered, and preferably added with black tiles on its sides.
Currently, my CSS class looks like this:
.img-responsive{
display: block;
max-width: 100%;
min-width: 100%;
height: auto;
}
I've tried to play around with max-height on the image, or on a dedicated container, nothing seemed to do the trick by pure CSS.
Clarifications:
I don't know the images dimensions in advance so can't just put them in a container with a preset size.
Basically, my goal is for the images to be always fully visible on the screen (if you scroll to the image) and take up the largest possible surface.
Here's a more detailed example:
Let's say I have scrollable container with a lot of content. The container takes up the entire viewport width (let's say its 500px) and the available visible height of the container is the entire viewport height minus a navbar height (let's say 1000px).
I can't know in advance what's the container's visible dimensions as it can always change.
Inside the container there's whatever, text, images, etc.
Now, for a given image, here are possible scenarios:
If the image is 500x800, it should be presented as is, as it takes up the entire available width, and height is no bigger then the container's visible height.
If the image is 500x2000, it should be scaled down to 250x1000
and horizontally centered. This will take up the entire visible container's height, and keep the image's aspect ratio
If the image is 250x300, it should be scaled up to 500x600, taking up the entire available width
If the image is 200x500, it should be scaled up to 400x1000, taking up the entire available height
If the image is 1000x1000, it should be scaled down to 500x500, taking up the entire available width
Here's a JSFiddle explaining the problem
I would advise against using the IMG tag for this. Rather use a div tag and then use background image properties. Here is the code for this, set the container size to whatever you like:
<div id="container"></div>
<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;
</style>
background-size: contain is what is best for this. It scales the image to the largest the image can be within the div without making it larger than its native size. Hope this helps
EDIT:
Forgot to add that if you want it to be in the center of the container, so that when the image doesnt fit the full size of the container there is the white space around it, you use the css code background-position: center center;
Mostly what you need is to give img elements two properties {max-width:100%} and {height: auto}
If you open the snippet below in full screen and resize your window (Note: image sizes are randomly chosen)
you will see how nice they play. They adhere to the max width and they don't overstretch themselves in any direction.
I added some code in there just to make this easier to show
like making giving images {display:block} and {padding-bottom}
body {
background: #131418;
text-align: center;
color: white;
font-size: 25px;
}
body,
.image-container,
.image-container img,
.smalldiv {
max-width: 100%;
}
.image-container img {
height: auto;
display: block;
padding-bottom: 1em;
}
.smalldiv {
/*for demnostration only */
width: 600px;
background: darkblue;
}
.smalldiv,
.image-container img {
margin: 0 auto;
}
<h3>Images will always keep their aspect ratio and they will always adhere to the width of their parent containers.</h3>
<hr>
<div class="image-container">
<h4>This is what the image container looks like when it has the entire screen space</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
<div class="smalldiv">
<div class="image-container">
<h4>This is what the image containing div looks when it's put inside a container smaller then the screen width</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
</div>
evilgenious448 answer comes really close, just that it only works with background images. What I have is:
<html>
<head>
<style>
body {
margin: 0px;
}
.holder {
background-image: url('image1.JPG');
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="holder">
<div class="inner">
</div>
</div>
</body>
</html>
I do not know how to size the inner div equally to the image.
Here is an example with code and everything:
You can drag around the page to test.
--- When the viewport is higher / taller than the image, the image's width is the width of the viewport disregarding viewport height. On the other hand, when the viewport is wider than the image, the image uses the viewports height, disregarding its with.
#image {
background-image: url(https://media.cntraveller.com/photos/611bedcd231ed5e8dfa34573/16:9/w_2580,c_limit/sennen-cove-beach-britain-conde-nast-traveller-20april18-rex.jpg);
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
<body id="body">
<div id="image" />
</body>
You can use height: 100% of the parent container (in my case its img-holder). And apply text-align: center to the parent. Like:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
.img-holder img {
height: 100%;
}
Have al look at the snippet below:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
img {
height: 100%;
}
<div class="img-holder">
<img src="http://placehold.it/100x200" alt="">
</div>
Hope this helps!
The best and the easiest way is to use vh and vw properties. vh when set to 100 takes up the complete Viewport Height and same goes with vw for width. Further, max height property may be added to stop image from stretching beyond its original dimensions.
Given this simple layout:
HTML
<div class="container">
<div class="imgContainer">
<img src="http://placehold.it/400x400">
</div>
<div>
This should always stay to the right of the image.
</div>
</div>
CSS
.container {
height: 20vh;
}
.imgContainer {
float: left;
height: 100%;
}
img {
height: 100%;
}
Issue #1
Chrome, Firefox, and Opera correctly display it like this:
IE11 incorrectly puts the text 400 pixels to the right, based on the natural width of the image:
Issue #2
As you increase the window's height, the text should stay glued to the right of the image. This works correctly in Firefox.
However, the text overlaps the image in Chrome and Opera:
See the behavior in this Fiddle.
Question: Is there a style I can add that will cause all browsers to behave consistently?
[Note: I discovered this while working on this question. I thought I had a solution, until I realized it wasn't responsive in any browser except Firefox.]
The following might do the trick.
Instead of using float, I would suggest using CSS tables.
Apply display: table to .container and set the height as needed.
For the two child elements, .imgContainer and .panel, use display: table-cell and inherit the height from the parent block.
I think this is pretty close to what you need, should work in all browsers
(but I did not check...)
.container {
height: 20vh;
display: table;
}
.imgContainer, .panel {
display: table-cell;
height: inherit;
vertical-align: top;
}
img {
vertical-align:top;
height: inherit;
}
<div class="container">
<div class="imgContainer">
<img src="http://placehold.it/400x400">
</div>
<div class="panel">
This should always stay to the right of the image.
</div>
</div>
I am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}