Can't change element height

#1

Please help, cant find where in CSS to change element height to be square .

image
image.jpg1249x491 187 KB

Website http://www.varniukonamelis.lt

#3

In the selector .portfolio-item img you can change width and height.

Screenshot
Screenshot.jpg1293x611 226 KB

#4

If you change the width, your images are going to be distorted as they seems to be 600 x 400 px.

#5

Somewhere i found that width is 33%, so if change height to something like 400px, i guess it wil not be Square :confused:

#6

You could always add object-fit: cover to have CSS crop the image so it will not be distorted when you put it in a square; it will be cropped so it looks good.

#7

May I ask why you want to change the images from 600x400 rectangles to 400x400 squares? If they must be square, then they will either be squeezed out of shape as they are now, or the sides must be cropped to preserve a normal aspect ratio. Either way, they will not look like the original 3x2 images.

If you do not assign a height ({height:auto} is already declared), then the images will continue to display at their normal aspect ratio and not appear squeezed out of shape.

If you can explain your intention, your wish or your goal, perhaps someone here will be able to suggest a way to achieve it without distorting the images, or at least offer a suggestion that preserves the aspect ratio of the images.

#8

Original images is 800x800 :slight_smile:

#9

Can you tell where the 800x800 images are stored? I found some, but not all. Please note that these are not all 800x800.

http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38391700_2074955639194792_8828356352679084032_n.jpg  (800x800)
http://www.varniukonamelis.lt/wp-content/uploads/2012/04/small-wooden-play-house-harmonious-kids-playhouse-plans-inspiring-design-featuring-admirable-wooden-decorating-narrow-entry-hall.jpg  (936x780)
http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38213625_2074955659194790_1620021892654039040_n.jpg  (800x800)
http://www.varniukonamelis.lt/wp-content/uploads/2015/06/upper-pond-e1531385650656.jpg  (2043x725)
http://www.varniukonamelis.lt/wp-content/uploads/2018/07/small-wooden-play-house-small-wooden-outdoor-playhouses-entry-decorating-pictures.jpg  (600x600)
http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38195918_2074955652528124_6076363990571679744_n.jpg  (800x800)

After you locate ALL of the 800x800 images, replace the URLs for the 600x400 images with the URLs for the 800x800 images.

One example.

Change this:

<img class="attachment-portfolio size-portfolio wp-post-image" src="http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38391700_2074955639194792_8828356352679084032_n-600x400.jpg" alt="" title="" height="400" width="600">

To this:

<img class="attachment-portfolio size-portfolio wp-post-image" src="http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38391700_2074955639194792_8828356352679084032_n.jpg" alt="" title="" height="800" width="800">

 

Finally:

Delete the fixed height:400px.

#10

Well, i get idea, so wordpress editor croped it? I feel stupid, cant find where
<img class="attachment-portfolio size-portfolio wp-post-image" src=" is located, used String locator, no results :smiley:

#11

I don’t know how they came into existence. To me, they look like they were cropped and scaled using a photo editing application such as Photoshop or GIMP. At the right end of the images that I listed, I noted in parentheses the actual dimensions of the ones that I found. Not all are 800x800 so you still need to find or create the three that I did not find.

If you executed a full string search, you would not have found the lines. The developer’s tool that I was using reformatted them. You would have had to use a “most likely to be found” partial string search.

Those 6 lines can be found if you open your site in your browser and view page source.
I see them on lines 109, 116, 123, 130, 140, 150

line 109
<img width="600" height="400" src="[http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38391700_2074955639194792_8828356352679084032_n-600x400.jpg](view-source:http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38391700_2074955639194792_8828356352679084032_n-600x400.jpg)" class="attachment-portfolio size-portfolio wp-post-image" alt="" title="" />

line 116
<img width="600" height="400" src="[http://www.varniukonamelis.lt/wp-content/uploads/2012/04/small-wooden-play-house-harmonious-kids-playhouse-plans-inspiring-design-featuring-admirable-wooden-decorating-narrow-entry-hall-600x400.jpg](view-source:http://www.varniukonamelis.lt/wp-content/uploads/2012/04/small-wooden-play-house-harmonious-kids-playhouse-plans-inspiring-design-featuring-admirable-wooden-decorating-narrow-entry-hall-600x400.jpg)" class="attachment-portfolio size-portfolio wp-post-image" alt="" title="" />

line 123
<img width="600" height="400" src="[http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38213625_2074955659194790_1620021892654039040_n-600x400.jpg](view-source:http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38213625_2074955659194790_1620021892654039040_n-600x400.jpg)" class="attachment-portfolio size-portfolio wp-post-image" alt="" title="" />

line 130
<img width="600" height="400" src="[http://www.varniukonamelis.lt/wp-content/uploads/2015/06/upper-pond-e1531385650656-600x400.jpg](view-source:http://www.varniukonamelis.lt/wp-content/uploads/2015/06/upper-pond-e1531385650656-600x400.jpg)" class="attachment-portfolio size-portfolio wp-post-image" alt="" title="" />

line 140
<img width="600" height="400" src="[http://www.varniukonamelis.lt/wp-content/uploads/2018/07/small-wooden-play-house-small-wooden-outdoor-playhouses-entry-decorating-pictures-600x400.jpg](view-source:http://www.varniukonamelis.lt/wp-content/uploads/2018/07/small-wooden-play-house-small-wooden-outdoor-playhouses-entry-decorating-pictures-600x400.jpg)" class="attachment-portfolio size-portfolio wp-post-image" alt="" title="" />

line 150
<img width="600" height="400" src="[http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38195918_2074955652528124_6076363990571679744_n-600x400.jpg](view-source:http://www.varniukonamelis.lt/wp-content/uploads/2012/09/38195918_2074955652528124_6076363990571679744_n-600x400.jpg)" class="attachment-portfolio size-portfolio wp-post-image" alt="" title="" />

I am not a Wordpress person so I do not know what your development environment looks like but that should get you pretty close. :slight_smile:

Please realize that I am approaching your issue as an HTML/CSS problem. If this is a Wordpress issue (if you are not familiar enugh with your Wordpress environment) this post should be moved to the Wordpress category for specialized assistance in that area.

Finally,
It is always recommended that one validate their code as a site is being written. The W3C validator reports 13 errors and 26 warnings on the home page. You might want to take a look at them and correct them.

Click the “Message Filtering” button for a summary view.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.varniukonamelis.lt%2F

For your bookmarks:
HTML: https://validator.w3.org/nu/
CSS: https://jigsaw.w3.org/css-validator/

#12

oh Cat, u spent so much time on me, i can find those lines in browser, but not in my wordpress, wordpress editor croped my images to 400x600,probably its programed in php code somewhere

#13

I haven’t looked at a WordPress ACP for quite some time, but last I knew the resizing / cropping is a feature that generates different versions of images.

IIRC it was under “attachments” or “media” and is there so that a single post page will have a larger image displayed and pages with lists of posts will have a smaller image. And maybe another for the RSS feeds?

I recommend putting finding those settings on your todo list so you can avoid this issue with future posts.

#14

Ok. I will move this topic to the Wordpress category and hopefully someone will be able to provide more experienced Wordpress help.

Cheers. cat

#15

Please mark like solved. IF i upload 800x800 its croped to 600x400, if i upload 400x400, it dont crops and i get Square image, thanks you Cat very much for your time.

#16

@gulejvladimiras,

Does that solution work at desktop widths as well as tablet and mobile widths? Even if it does, I do not believe that uploading a smaller square image is the best solution. It sounds to me like the resizing script that is being used needs to be modified or deleted. Again, I am out of my element here so give us some time to play with your home page and see if there is another solution.

<ot>
Wordpress or JS wizards where are you?
shivering cat
</ot>

#17

When you upload an image to WordPress’ media library, WordPress automatically makes several copies - a full size, a mid size and a thumbnail, for example. You can adjust the default size in your functions.php file. Or use the image edit feature in the media library.