Take fixed size of a picture

Question

I want to take fixed size of a picture. I tested this code:

  .icon4 {
  display: inline-block;
  width: 270px;
  height: 270px;
  text-align: center;
  color: #fff;
  font-size: 130px;
  line-height: 130px;
  /*padding: 33px 20px 30px;*/
  max-width: 100%; }
  .icon2:before {
    display: inline-block; }
  .icon2.fa-shekel {
    background: #4884f2; }
  .icon2.fa-compass {
    background: #d24f4f; }

<div class="icon4">
  <img src="http://st2.depositphotos.com/1058504/12481/i/450/depositphotos_124811492-Two-businesspeople-discussing-work-in.jpg" alt="" />
</div>

https://jsfiddle.net/be70nhyb/

When I have pictures with different size the end result is images different size.

How I can take only fixed size from the picture?

[this](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) might get you started... — kukkuz, Oct 06 '16 at 14:40

score 0 · Answer 1 · answered Oct 06 '16 at 14:33

0

add "overflow:hidden;" to .icon4

answered Oct 06 '16 at 14:33

Darango

84
3

For some reason it's working on https://jsfiddle.net/be70nhyb/ but on on my final code. – Peter Penzov Oct 06 '16 at 14:39

score 0 · Answer 2 · edited Oct 06 '16 at 14:48

0

I think you need to give width and height to image like this:

.icon4 img { 
    width: 270px;
    height: 240px;
 }

edited Oct 06 '16 at 14:48

kukkuz

41,512
6
59
95

answered Oct 06 '16 at 14:34

Ovidiu Grigoras

1

This will resize the picture. How I can get only get part of the picture? – Peter Penzov Oct 06 '16 at 14:47
@PeterPenzov see Paulie_D's fiddle in the comments above... I guess that's all you need.. – kukkuz Oct 06 '16 at 14:49

Take fixed size of a picture

2 Answers2