I am using a wordpress template to control my website. On the home page is a small header with "Home About Us Contact Us" etc etc and then below that is an image that transitions to another image which transitions to another image. This image is too large for my liking so I am trying to shrink it. So I go to the CSS and adjust the image size, however because there is text on the bottom of the image it is being cut off.
I would like to maintain the image width but just make it a little shorter, say about 75% of the original design.
Below is what I think is the applicable code
.camera_wrap {
height: 672px!important;
max-width: 1920px;
display: none;
position: relative;
z-index: 0;
margin: 0 auto 60px!important;
I added the height: 672px!important; code which makes it about the height I want but again the bottom gets cut off. I would prefer to have the CSS re-size the image instead of clip it. But all of my searches haven't turned up how to do this. I am just finding the re-size attribute.
Try using a path to the img rather than the images class to control the styling for the image.
example html
<div class="image-div">
<img class="image">
</div>
instead of
.image { height: 500px; }
try
.image-div img { height: 500px; }
Also, here's an example of a fiddle and an example in that fiddle of how to affect change to only the second image using nth-child
https://jsfiddle.net/Hastig/g6m5nqc9/1/
.image:nth-child(n+2) {
height: 75px;
}
Related
I want to prevent page-reflow, caused by image loading on a web page.
Page reflow occurs when images load after the page's text content has already rendered. There's a 'jerk' caused by the said page-reflow. It makes for awful user experience.
My requirements are:
(i) All images be fully responsive
(ii) Have a max-width of 450px (while maintaining aspect-ratio)
(iii) Be center-aligned within their containers
There can be several images on the page. All have different aspect ratios (but scaled to the same width - i.e. 450px). I know their dimensions beforehand.
Currently my code is simply:
.container {
text-align:center;
overflow:hidden;
background:whitesmoke;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.container img {
width:100%;
max-width:450px;
vertical-align: top;
}
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
This fulfils all my requirements - except it can't prevent page reflow. How do I tweak this to get my desired result?
Traditional solutions to prevent such page-reflow go something like this:
HTML
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: calc(100%/(450/562));/* example width=450px height=562px*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This works fine. But it doesn't impose a max-width like I need it to. The image fills the entire container - as large as that container is (e.g. the full width of the screen on a laptop).
To tweak it, I tried adding max-width:450px;max-height:562px in .container img. That corrected the image's dimensions. But it gave the container extra padding at the bottom:
That's a shame. What I really wanted was for it to look like below:
Note that the gray colouration above is the background container, which simply disappears on smaller resolutions:
What's the best way for me to achieve my requirements? An illustrative example would be great.
Note: adding max-width: 450px;max-height: 561px; in .container doesn't solve the problem either.
how to crop an image in html? I have an image on server-pc, is it possible to put only a cropped portion on my webpage without explicitly cropping and creating a new image?
You have two options really.
1) is to use image modification scripts to reproduce a cropped image, like TimThumb (requires PHP). This will crop the image dynamically. It's unclear from your question whether you don't want a new image at all, or whether you just don't want to create one manually.
2) is to do something nifty with HTML/CSS. Basically you'd create a container for your image, hide the overflow, and position/resize the image within it. It'll be something like this...
HTML:
<div class="crop">
<img src="image.jpg" alt="">
</div>
CSS:
.crop {
display: block;
height: 100px;
position: relative;
overflow: hidden;
width: 100px;
}
.crop img {
left: -20px; /* alter this to move left or right */
position: absolute;
top: -20px; /* alter this to move up or down */
}
So if I add a link to an image, the link area goes the entire width of the page, which is beyond the size of the image. Here's my entire CSS code:
img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
However, I've deduced this happens due to this single line:
display: block;
I want my images to be centered and mobile-friendly, so I don't think I can change this coding, but is there something I can do to the a element that'll prevent the link area from extending outside my images?
Here's a test page: Link
You can change this coding, while maintaining mobile-friendliness.
One way to do this would be to create an overlaying <div> that has it's text centered. Then set the max-width of the image to 100%. And you're done.
.text-center {
text-align: center;
}
img {
max-width: 100%;
}
<div class="text-center">
<a href="http://www.gloryhood.com/images/free-will-1.png">
<img src="http://www.gloryhood.com/images/free-will-1.png" />
</a>
</div>
With this code (see example), your image is centered and mobile friendly:
body {
text-align: center;
}
img {
max-width: 100%
}
When your page gets more complicated than that, it helps to wrap images (or even whole content block) within container div-s to help with the positioning part.
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect