I need help with some code, I am trying to make an image basically zoom in within 240px by 240px div, I don't know how exactly how to explain it, but basically the image needs to be zoomed in on and only in a certain square area.
the first one here is fine, doesn't need anything changed, but the second one doesn't fit within the whole square because it is too small.
<!-- 2 --><a class="wsb-media-carousel-wrapper img_rounded_corners" rel="wsb-media-carousel-desktop" href="productimg/bowk-inside.jfif" data-fancybox-type="image" style="height: 240px; width: 240px; margin: 20px; display: inline-block; vertical-align: middle;"><img src="productimg/bowl-inside.jfif" style="width: 240px; top: -39.2138px;"></a>
here is how it looks: i want the second one to look like the second one without actually resizing the image out of the code. i got this code from another website but cannot figure out how they made it fit.
my website: my website
their website: their website
The style attribute object-fit specifies how elements such as images should be placed inside of it's container. You can learn about it at https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I have created a basic example of object-fit set to cover on a series of images to create the effect you are looking for.
img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 20px;
}
img.orig {
object-fit: initial;
height: auto;
}
<p>Original Images</p>
<img class='orig' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/hub-default.jpg" alt="">
<img class='orig' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/background1.jpg" alt="">
<hr>
<p>Object-fit images</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/hub-default.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/background1.jpg" alt="">
Related
I'm trying to get an image of a player from the premier league's resources, then display that on a web page.
The images can be found using the link https://resources.premierleague.com/premierleague/photos/players/110x140/p178186.png. The 178186 is a code unique to a player and I can change that using jinja and the premier league api. So, I get the image on my page, but I can't change its width, only its height. I have tried declaring it when making the image in HTML:
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png" width="220">
I have also tried creating a class and then using css change the width:
<div class="playerimage">
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png" height="280">
</div>
.playerimage {
max-width: 220px;
min-width: 219px;
width: 220px;
height: 280px;
}
Website showing the image appears, with the height altered to 280px, but no change in width
Select the img tag with css instead of the div with .playerimage, so this worked for me:
HTML
<div class="playerimage">
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p178186.png" height="280">
</div>
CSS
.playerimage img {
height: 280px;
width: 10px;
}
Im pretty sure the problem is the width="220" attribute in the <img>-tag. If you remove this you should be fine and can change the height, width however you want and need to.
try this instead:
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png">
Trying to get the three images to all be responsive and the same size.
For some reason, this code is causing the third image to be smaller than the other two. Any idea why?
It's weird because when I remove the max-width from the .side-content-image img in the CSS the images are the same size. But as soon as it is applied the third one is smaller than the other two.
I eliminated, hopefully, extraneous code from this HTML. This is all in a container with a specific width.
code:
.side-content-image {
width: 35%;
height: auto;
border: 1px solid blue;
}
.side-content-image img {
max-width: 100%;
}
<div class="side-content">
<div class="side-content-image">
<img src="./resources/images/information-orientation.jpg" alt="God
view of people walking on a path">
</div>
</div>
<div class="side-content">
<div class="side-content-image">
<img src="./resources/images/information-campus.jpg" alt="room
with people at tables and world map on a wall">
</div>
</div>
<div class="side-content">
<div class="side-content-image">
<img src="./resources/images/information-guest-lecture.jpg" alt="old
man with glasses looking off into the distance">
</div>
I can't replicate the problem: https://jsfiddle.net/ee06wyzy/
So I'm guessing:
1) The images aspect ratio being different might cause some issues, also depending if any of the images are not big enough to fill in the container's size. Try using same image in all three places and see if the problem persists.
.side-content-image img {
width: 100%;
height: auto;
}
2) The problem might be the side-content-image - width: 35%, three of them will add up to 105% which might force side-content-image divs to shrink down if the 3 divs are displayed inline.
Try this and see if it is fixed:
.side-content-image {
width: 33%;
height: auto;
border: 1px solid blue;
}
I am accessing an API with different product images. These images are not always the same dimensions unfortunately. I want to display them in a 250x250 div.
So sometimes the image is portrait and the image should be scaled on based on the height (not filling the full 250px width). Sometimes it is landscape and it should be scaled to the width (not filling the full 250px) height.
Honestly I have no clue how to do this (with CSS - if possible at all) so any help is appreciated.
Thanks.
edit
it was mentioned in the comments that it duplicates question: Scale image with css to both width and height to scale there is overlap indeed - however i did not find the answers at this question satisfying enough (for my understanding).
Sounds like you want to be applying images using background-image and giving them background-size: contain:
.product-img {
width: 250px;
height: 250px;
background-image: url(path/to/image);
background-size: contain;
}
As Georgy Malanichev pointed, background is a nice option,
if you also need the images for being indexed to get better SEO, you can set it with max-height and max-width CSS property:
div.imgContainer{
float: left;
width: 250px;
height: 250px;
border: 1px solid black;
}
div.imgContainer > img {
max-width: 250px;
max-height: 250px;
}
<div class="imgContainer">
<img src="http://joelbonetr.com/images/fwhee.png">
</div>
<div class="imgContainer">
<img src="http://joelbonetr.com/images/root.jpg">
</div>
<div class="imgContainer">
<img src="https://lh3.googleusercontent.com/bx2KTx4kmESKvwL2Npc8tdLuhIWFj3_ewMkAHNI6_5vj1tOrAukZD794wJqWRb_H_8I=w250-h250">
</div>
<div class="imgContainer">
<img src="https://www.venca.es/i/967184/l/top-sexy-de-muselina-elastica-flocada-en-terciopelo-con-tiras-elasticas-negro-burdeos.jpg">
</div>
As you can see if you inspect, all divs are 250x250 px, and the images fit in resizing when needed.
Use the other answer for backgound image, documentation is here for what contain does https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
If you have to use an image and cannot use background image or you want the image tags in the html for better SEO then use the below. By setting both max width and height to 250px, it automatically sizes the image correctly. It will stop sizing once either one of the dimensions reaches 250
.test1 {background: blue;}
.test2 {background: green;}
.test2 img,
.test1 img{
max-width: 250px;
max-height: 250px;
}
.test1,
.test2 {
text-align: center;
width: 250px;
height: 250px;
}
<div class="test1">
<img src="https://wallpaperbrowse.com/media/images/_89716241_thinkstockphotos-523060154.jpg" />
</div>
<div class="test2">
<img src="http://images2.fanpop.com/image/photos/10200000/Some-Random-Stuff-wumbo-10274290-300-498.jpg" />
</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%;
}
So I want grass to fill from left to right right above my footer. I am having a hard time getting it to repeat itself. I set positition to fixed, and also float: left but still no luck. I would just continuously keep putting more images hardcoded in my HTML, but I feel I can do this with CSS and not have like 100 lines of extra code. Also, I want the images to grow or retract if the user makes browser larger or smaller.
live demo
HTML
<figure>
<img src="arrow.png" alt="arrow" class="arrow">
<p class="clickHere"> Click one! </p>
<img src="downwardmonkey.png" alt="down" class="head">
<img alt="down" class="footer">
</figure>
CSS
figure img.footer
{
position: fixed;
bottom: 45px;
float: left;
background-image: "grass.png";
background-repeat: repeat-x;
}
if any other code is needed to help let me know!
Instead of putting images tags put a div and provide background image to it
<figure>
<div class="grassImageDiv"></div>
</figure>
CSS:
.grassImageDiv
{
display: inline-block;
background-image: url("grass.png");
width:100%; //To make it browser size independent
height: 80px;
}
You can give height and width according to your need.