Q:

Como hacer que una imagen respete un contenedor div

Tengo lo siguiente en html5 y css3, el problema es que la imagen no me respeta el contenedor div y quiero que la imagen se ajuste automáticamente al tamaño del contenedor para que se mantenga dentro de dicho contenedor marcado con un fondo rojo.
en el <div class="pleca2"> marcado con fondo azul ira otra imagen pero las 2 deben mantenerse dentro del <div class="columna"> logrando un resultado exactamente igual ya que cuento con las 3 imágenes que se muestran abajo.

lo que tengo me da el siguiente resultado

.contenedor-columnas {
 width: 100%;
 margin: auto;
 text-align: center;
 margin-bottom: 50px;
}

.columx2 {
 width: 50%;
 float: left;
 padding: 20px 20px;
 box-sizing: border-box;
}

.columna {
 height: 200px;
  background:red;
 /*background: url("img/Texture_madera.png");*/
 background-position: center;
 background-attachment: contain;
 background-size: cover;
 
}

.columx2 h1 {
 font-size: 20px;
 text-transform: uppercase;
 font-weight: bold;
 color: #4e3224;
}

.columx2 img {
 width: 100%;
 margin: auto;
}

.pleca2 {
 width: 100%;
  height:20px;
  background:blue;
}

.pleca2 img {
 width: 100%;
}
<section class="contenedor-columnas">
            <div class="columx2">
                <div class="columna">
                    <h1>sombreros</h1>
                    <div class="pleca2">
                        <img src="img/Pleca cafe-01.png" alt="">
                    </div>
                    <img src="http://i1196.photobucket.com/albums/aa419/yourtrustytime/1_zpss0ayfhqy.png" alt="">
                </div>
            </div>
            <div class="columx2">
                <div class="columna">
                    <h1>Accesorios</h1>
                    <div class="pleca2">
                        <img src="img/Pleca cafe-01.png" alt="" >
                    </div>
                    <img src="http://i1196.photobucket.com/albums/aa419/yourtrustytime/1_zpss0ayfhqy.png" alt="">
                </div>
            </div>
        </section>

A:

Lo primero que debes hacer es hacer la imagen de fondo absoluta o en su defecto, ponerla como background-image. Lo segundo, puedes usar flexbox para tener una columna de dos elementos para .columna, en donde el h1 ocupará 40px de alto y el resto de espacio lo ocupará .pleca2. Adicionalmente, haciendo este último elemento flex, obligará a "estirar" la imagen hija ocupando así siempre todo el alto que tenga .pleca2.

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.contenedor-columnas {
 width: 100%;
 margin: auto;
 text-align: center;
 margin-bottom: 50px;
}

.columx2 {
 width: 45%;
 float: right;
 /*padding: 20px 20px;*/
}

.columx2:nth-child(odd) {
  float: left;
}

.columna {
  display: flex;
  flex-direction: column;
 height: 250px;
  background:red;
 /*background: url("img/Texture_madera.png");
 background-position: center;
 background-attachment: contain;
 background-size: cover;*/
  position: relative;
}

.columna h1 {
  align-items: center;
  display: flex;
  justify-content: center;
  flex: 0 0 40px;
 font-size: 20px;
 text-transform: uppercase;
 font-weight: bold;
 color: #4e3224;
  width: 100%;
  z-index: 5;
}

/* Esto puede cambiarse por un background-image en .columnx2 */
.columna > img {
  left: 0;
  height: 100%;
  position: absolute;
 width: 100%;
  top: 0;
  z-index: 1;
}

.pleca2 {
  display: flex;
  flex: 1;
  padding: 5px; /* para que la imagen no quede muy ajustada */
 width: 100%;
  z-index: 5;
}

.pleca2 img {
  display: inline-block;
 width: 100%;
}
<section class="contenedor-columnas">
  <div class="columx2">
    <div class="columna">
      <h1>sombreros</h1>
      <div class="pleca2">
        <img src="https://www.freeiconspng.com/uploads/white-hat-icon-9.png">
      </div>
      <img src="https://image.freepik.com/free-vector/wood-texture_1083-21.jpg">
    </div>
  </div>
  
  <div class="columx2">
    <div class="columna">
      <h1>Accesorios</h1>
      <div class="pleca2">
        <img src="https://placehold.jp/200x200.png" alt="">
      </div>
      <img src="https://image.freepik.com/free-vector/wood-texture_1083-21.jpg" alt="">
    </div>
  </div>
</section>

Tip: para lograr el borde de la imagen usa la propiedad border-image.

A:

Si entendí, la propiedad que estás buscando, se llama object-fit.
Eso sí antes, tienes que darle a la etiqueta de imagen una altura y un ancho dependiendo de tu necesidad. Estas son solo de referencia o delimitación, no el tamaño final que optará la imagen.
Lo otro es que será necesario que le puedas dar un alto a la imagen dependiendo de la altura del título, para esto, te sugiero usar calc para restar al 100% de la altura del contenedor menos la atura del título, así.
.columna img{
  height: calc(100% - XXpx); 
}

Una vez aplicado lo anterior, podrías usar la propiedad object-fit así:
Object-fit: cover
img.cover{
  object-fit: cover;
}

Si quieres que siempre conserve sus proporciones pero ocupe gran parte o totalmente el contenedor padre.
Object-fit: contain
img.contain{
  object-fit: contain;
}

Si quieres que siempre conserve sus proporciones pero además quieres que la imagen no sobrepase las medidas y siempre se ajuste para estar dentro de estas (es decir no se deforme).

Aquí una demo, con el código html tal como lo presentas (aunque use algunas imágenes de referencia que encontré en internet y verifica que son de distinto tamaño):

.contenedor-columnas {
 width: 100%;
 margin: auto;
 text-align: center;
 margin-bottom: 50px;
}

.columx2 {
 width: 50%;
 float: left;
 padding: 20px 20px;
 box-sizing: border-box;
}

.columna {
 height: 200px;
  background-color: red;
  background-image: url('http://picsum.photos/800/600?image=307');
 background-position: center;
 background-size: cover;
 
}

.columx2 h1 {
 font-size: 20px;
 text-transform: uppercase;
 font-weight: bold;
 color: #4e3224;
}

.columx2 img {
 width: 100%;
 margin: auto;
}

.pleca2 {
 width: 100%;
  height: 20px;
}

.pleca2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.columna>img{
  width: 100%;
  height: calc(100% - 60px);/*<-- Yo puse 60px porque más o menos es lo que mide la altura del título, pero tú coloca un número de pixeles que se ajuste*/
  object-fit: contain;  
}
<section class="contenedor-columnas">
            <div class="columx2">
                <div class="columna">
                    <h1>sombreros</h1>
                    <div class="pleca2">
                        <img src="https://dgm.azureedge.net/products/lg/fiora-shelf-bronze.png" alt="">
                    </div>
                    <img src="https://www.almacenesantonioguerrero.es/wp-content/uploads/2017/06/REF-5114-SOMBRERO-CAN%CC%83ERO-PANAMA.png" alt="" >
                </div>
            </div>
            <div class="columx2">
                <div class="columna">
                    <h1>Accesorios</h1>
                    <div class="pleca2">
                        <img src="https://dgm.azureedge.net/products/lg/fiora-shelf-bronze.png" alt="" >
                    </div>
                    <img src="https://ugc-prd.dressinglab.com/media/thumbnails/images/products/sombrero-turquesa9828a.png.450x678_q100_upscale.png" alt="" >
                </div>
            </div>
        </section>

Sí puedes modificar el html (que sería lo mejor) aplicalas las propiedades mediante clases, como hice en los primeros ejemplos.
Por cierto, creo que la imagen que usas para "pleca" debería estar como fondo en el CSS y no en una etiqueta html y aún mejor, si la colocas como un pseudo-elemento mediante after o before de la etiqueta <h1> ya que si es como creo que la quieres usar, esta no variara nunca y siempre se situara debajo del título. 
Consejo
Deberías usar flexbox en el contenedor padre para que la imagen siempre tome el tamaño restante del espacio que queda, algo así:
.columna{
  display: flex;
  flex-direction: column;
}

Acá la misma demo, pero aplicando los consejos y cambios que te digo.

.contenedor-columnas {
  /*Modifica aquí el tamaño de las columnas y veras que no se deforma la imagen ni se recorta*/
  --col-height: 120px;
 width: 100%;
 margin: auto;
 text-align: center;
 margin-bottom: 50px;
}

.columx2 {
 width: 50%;
 float: left;
 padding: 20px 20px;
 box-sizing: border-box;
}

.columna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: stretch;
  justify-content: center;
  height: var(--col-height);
  background-color: red;
  background-image: url('http://picsum.photos/800/600?image=307');
  background-color: #ece0d5;
  background-blend-mode: color-burn;/*Esta propiedad es innecesaria, ignorala. La uso simplemente para darle un tono distinto y más claro al fondo*/
 background-position: center;
 background-size: cover; 
}

.title {
  width: 100%;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: #4e3224;
  line-height: 1em;
  margin: 0;
  padding: 0.5em;
  position: relative;
}

.pleca{
  background-image: url('https://dgm.azureedge.net/products/lg/fiora-shelf-bronze.png');
  background-position: center calc(100% + 15px);
  background-size: 100% 60px;
  background-repeat: no-repeat;
  padding-bottom: 20px;/*El espacio que ocuparía la pleca*/
}

.columx2 img {
  width: 100%;      
  height: calc(100% - 50px); 
  object-fit: contain;  
}

/*Este estilo de abajo ignoralo, es solo para que puedas jugar con los tamaños de las columnas*/

style{
  background: #444;
  color: lime;
  font-family: monospace;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  padding: 5px;
  text-transform: uppercase;
  text-align: center;
}
<style contenteditable>.columna {--col-height: 150px;}</style>

<section class="contenedor-columnas">
  <div class="columx2">
    <div class="columna">
      <h1 class="title pleca">Sombreros</h1>
      <img src="https://www.almacenesantonioguerrero.es/wp-content/uploads/2017/06/REF-5114-SOMBRERO-CAN%CC%83ERO-PANAMA.png" alt="" >
    </div>
  </div>
  <div class="columx2">
    <div class="columna">
      <h1 class="title pleca">Accesorios</h1>
      <img src="https://ugc-prd.dressinglab.com/media/thumbnails/images/products/sombrero-turquesa9828a.png.450x678_q100_upscale.png" alt="" >
    </div>
  </div>  
  <div class="columx2">
    <div class="columna">
      <h1 class="title pleca">Accesorios</h1>
      <img src="https://ugc-prd.dressinglab.com/media/thumbnails/images/products/sombrero-de-verano-con-cinta-negra-y-mono-15759.png.450x678_q100_upscale.png" alt="" >
    </div>
  </div> 
  <div class="columx2">
    <div class="columna">
      <h1 class="title pleca">Accesorios</h1>
      <img src="https://agropublicidad.com/wp-content/uploads/2017/03/SOMBRERO-SAFARI-CAMUFLAJE-T-132-AGROPUBLICIDAD.png" alt="" >
    </div>
  </div> 
  <div class="columx2">
    <div class="columna">
      <h1 class="title pleca">Accesorios</h1>
      <img src="https://officialpsds.com/imageview/rv/k2/rvk2n4_large.png?1524855863" alt="" >
    </div>
  </div>
</section>

Si tienes alguna duda, déjame tu comentario.

