How to prevent image expansion (wordpress)

I am using single releated post below my content. But the picture is distorted in different sizes…

Screenshots;

g images

Here is css codes;

/* İlgili Kart */
.ilgili_karti {
 background-color: white;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 max-width: 100%;
 border: 0 solid;
 overflow: hidden;
 -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.1);
 -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1);
 -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.1);
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1);
 padding: 0;
 }
.ilgili_karti_gorsel .img {
 width: 220px;
 padding-right: 16px;
 margin-left: auto;
 margin-right: auto;
 height: 140px;
 float: left;
 text-align: center;
 display: block;
 overflow: hidden;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 }
.ilgili_karti_kategori a {
 display: table-cell;
 color: #999;
 padding-top: 16px;
 font: inherit;
 }
.ilgili_karti_kategori a:hover {
 color: #999;
 }
.ilgili_karti_baslik {
 font-size: 1.5em;
 font-weight: bold;
 color: #141412;
 line-height: 1.5;
 margin: 10px 15px 7px;
 }
.ilgili_karti_baslik a {
 box-shadow: none;
 color: #141412;
 text-decoration: none;
 }
@media (max-width: 960px) {
 .ilgili_karti_gorsel .img {
 width: 100%;
 padding-right: 0px;
 }
 .ilgili_karti_kategori a {
 padding-left: 16px;
 }
 }

and website: http://www.sistemgereksinimleri.info (you can see for yourself, )
How can I fix that, any advice ?

Hi @hasantngr53 you have to set the image height style to ‘auto’ instead of giving it a fixed height of 140px like you do…
Hope that helps

How can i set 140 px default, but for others (tablet, mobile) set auto ?

Take a look at CSS media queries to target specific devices like the ones you mentioned. If after checking that out you’re still stuck please ask again

I see…

I just want to fill this empty space >>

But I don’t know how can I do that

Fill it with what?

1 Like

with image

Can I interpret that to mean “with the same image”?

Assuming that you do not wish for the image to repeat AND that you widh to keep the proper aspect ratio, you can code the image so its height fits that space and the sides are cropped so they overflow the limited width, if necessary.

I don’t see the problem on your site; therefore, I am not sure under what conditions the problem occurs. Perhaps you could set up a stripped down “working page” so we can focus on the problem.

1 Like

I didn’t mean it… How can i say, empty space in below, its bother me. I want to do something like photos for default width. (pc width)

But this is could be too >

(set in the midst)

@hasantngr53.

I am showing 3 examples of the same ad in each of these screen-shots.
The image in the ad always maintains a normal aspect ratio. It is never stretched out of shape (although in example 2 the sides become cropped slightly as the page width narrows).

You can mentally compare all of the images in a row - the top row, the middle row, the bottom row - to imagine how the coding method would change them at different widths.

You will need to click these images to display them in their actual size. You can copy these image to your computer and open them in different browser tabs and click the tabs. That might help you compare the changes.

 

The top example shows the equivalent of {background-image:contain};

• The image box and the text box scale narrower as the page narrows before the mobile breakpoint is reached.
• The entire image is shown at all widths. Space appears above and below the image as the width narrows (before the mobile breakpoint).

 

The middle example is the equivalent of {background-image:cover};

• The image-box and the text box scale narrower as the page narrows before the mobile breakpoint is reached.
• The image is shown at the default height for the ad or the height of the text, whichever is greater. (In other words, the image is always the full height of the ad box.)
• The edges of the image are cropped as the page narrows (before the mobile breakpoint).

 

The bottom example uses a fixed image size (the width and height do not change) at widths before the mobile breakpoint.

• The image width and height dimensions are fixed. The text space narrows as the page width narrows before the mobile breakpoint is reached.
• It is possible for space to appear above and below the fixed-size image as the width narrows before the mobile breakpoint is reached.

 
This screen-shot shows the three examples described above of the Assan’s Creed ad in the wide (desktop) layout of your page. All three examples look the same in the wide view.

 

These next two screen-shots show progressively narrower views of the three ads.

 

These last two screen-shots show the image at the full width of the space on the page within the width assigned to the mobile view.

If you do not know what {background-size:contain} and {background-size:cover} do, please look them up.
easy: https://www.w3schools.com/csSref/css3_pr_background-size.asp
better: https://css-tricks.com/almanac/properties/b/background-size/
better: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images

I will not show any code until I know exactly which row you prefer. Suffice it to say that the images are foreground images as shown in your site.

You may then need someone with WordPress experience to help you make it happen the WordPress way.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.